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。 它似乎不會影響身高。 這導致真正拉伸的縮略圖。 我需要它們最大寬度為290px，高度應相應縮放。

Answer 1

任何未指定的維度都應自動縮放，但您的圖像可能是繼承其他方面的樣式。 要恢復自動縮放高度，您應為#imgContainer img指定以下屬性：

height: auto;

Answer 2

加：

#imgContainer img { height: 100% }

要么

#imgContainer img { height: auto }

應該夠了。