html - max-width イメージは親コンテナーを拡張しません

Question

画像のサムネイルが左に浮かんでいます。コードは次のとおりです。

  <div id="imgContainer">
    <div>
     <a href="#" class="item"><img src="image.png" /></a>
    </div>
   </div>

そして、ここにcssがあります：

#imgContainer div {
   width: 23%;
   float: left;
   padding: 1%;
   position: relative;
}

#imgContainer img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   max-width: 290px;
}

問題は、画像を幅だけ 290px に引き伸ばすことです。高さには影響しないようです。その結果、サムネイルが非常に引き伸ばされます。最大幅を 290 ピクセルにする必要があり、それに応じて高さを調整する必要があります。

Answer 1

指定されていない寸法は自動的にスケーリングされますが、画像は他の方法で指示するスタイルを継承している可能性があります。高さの自動スケーリングに戻すには、 に次のプロパティを指定する必要があります#imgContainer img。

height: auto;

Answer 2

追加：

#imgContainer img { height: 100% }

また

#imgContainer img { height: auto }

十分なはずです。