html - 在 float div 中以百分比形式包裹高度的图像

Question

很抱歉问了一个非常明显的问题，我确信它有一个非常简单的答案，我就是想不通。

非常简单，我想将图像放在 div 中，图像填充 100% 的 div 高度。

CSS

.container{
      height:100%;
      float:left;}

img {
      height:100%;}

HTML

<div class="container">
       <img src="xyz.jpg" />
</div>

结果如预期，但在任何非 webkit 浏览器中查看时，图像右侧(div 内)有大量空白。

在我的布局中，我希望将许多这样的 div 排成一行(通过 float )，因此 div 的宽度必须缩小到图像的宽度。

http://jsfiddle.net/osnoz/VzrnT/

Answer 1

默认情况下，没有指定高度尺寸的 div 只会扩展到足以容纳其内容。如果没有指定宽度，div 将扩展到其父级的宽度。因此，在您指定宽度之前，div 的宽度不会缩小到图像。

您的 div 设置为 100% 高度，这与它的 container 高度有关，< strong>不是它的内容。

您也不需要在图像本身上指定 100%。这只会使图像拉伸(stretch)到其容器高度的 100%。除非您指定容器高度，否则这是没有意义的。