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

Question

我将图像缩略图 float 到左侧。代码如下:

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

问题是: 它仅按宽度将图像拉伸(stretch)到 290px。好像不影响高度。这导致真正拉伸(stretch)的缩略图。我需要它们的最大宽度为 290 像素，高度应相应缩放。

Answer 1

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

height: auto;