divサイズを変更せずにdiv内の画像のサイズを変更する方法

Question

CSSを学習し、メディアクエリを使用する。私は左に浮かべた画像とその右にあるテキストを持っています。

<div id="imageContainer"><img src="myImage.jpg" width="100%"></div> 

<div id="someText"> some text....</div> 

ブラウザのウィンドウのサイズを変更すると、画像が小さくなり、画像の下部に白い隙間が表示され始めます。私は、メディアクエリを使用してイメージのサイズを増やすことによってこれを修正したいと考えています。これは私が試したものです：ウィンドウのサイズが変更と幅はギャップを作り、サイズが小さい1299px以上の画像が増加となったときに消えるように、これは画像のように動作します

@media screen and (min-width: 1000px) and (max-width: 1299px){ 
    #imageContainer img {min-width: 120%;} 
} 

が小さく取得するために開始します。

私の問題は、イメージが大きくなるにつれて、それを含むdivがテキストを右に押してレイアウトを台無しにすることです。私が望むのは、画像を増やすことですが、divを含む "imageContainer"は同じままです。私はそれを見て、それについてどうやって行くのかについてはあまり確信していません。御時間ありがとうございます。

Answer 1

おそらく画像のサイズは120％です。つまり、そのコンテナのサイズの120％になります。さらに、画像とdivが結合されます。つまり、両方とも相対的な位置にあるため、お互いに跳ね返ります。イメージを絶対的な位置にしてみてください。それが理にかなっていれば、それはdiv内から取り除かれます。

浮動小数点は、絶対配置された要素には適用できません。イメージのサイズで動作する特定の幅にテキストを折り返してください。

Answer 2

次のように

<div class="fixed"> 
<img class="effect" src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png" width="200" height="120" /> 
</div> 

とCSSに、役立つはず後、

.effect { 
    border: none; 
    margin: 0 auto; 
} 
.fixed{ 
    height: 200px; width: 200px; overflow: hidden; 
} 
.effect:hover { 
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
    -o-transform: scale(1.2); 
    transform: scale(1.2); 
    transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
} 

デモ：JsFiddle Demo