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 }

应该足够了。

max-width图像不会扩展父容器

2 个答案: