最大宽度图像不展开父容器答案

【问题标题】：max-width image doesn't expand the parent container最大宽度图像不展开父容器
【发布时间】：2012-09-24 09:41:01
【问题描述】：

我的图像缩略图向左浮动。代码如下：

  <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 像素，并且高度应该相应地缩放。

【问题讨论】：

这对我来说很好用...jsfiddle.net/BuZPL
谢谢，大卫 :) 现在我有另一个问题。我应该设置父容器的高度，使其位于其余缩略图下方？见jsfiddle.net/BuZPL/11
这个怎么样？ jsfiddle.net/BuZPL/12 我删除了 position: absolute 的东西，因为我不确定你为什么想要它。
戴夫，谢谢。但是，不幸的是，我需要绝对定位，因为每组缩略图都有 2 个图像重叠在一起：/ 还有其他方法可以克服吗？
你能举个例子说明你在 jsfiddle 上做什么，看看我能不能解决问题？

标签： html image css

【解决方案1】：

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

height: auto;

【讨论】：

很高兴我能帮上忙！请把我的帖子标记为答案好吗？

【解决方案2】：

添加：

#imgContainer img { height: 100% }

或

#imgContainer img { height: auto }

应该够了。

【讨论】：