html - 最大宽度图像不展开父容器

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;
}

问题是：它仅按宽度将图像拉伸到 290 像素。好像不影响身高。这会导致缩略图真正被拉伸。我需要它们的最大宽度为 290 像素，并且高度应该相应地缩放。

Answer 1

任何未指定的尺寸都应自动缩放，但您的图像可能会继承其他方式的样式。要恢复到自动缩放高度，您应该为 指定以下属性#imgContainer img：

height: auto;

Answer 2

添加：

#imgContainer img { height: 100% }

或者

#imgContainer img { height: auto }

应该足够了。