Question

很抱歉提出一个非常明显的问题，我确信它有一个非常简单的答案，我只是想不出来。

很简单，我想将图像放在div中，图像填充div的高度的100％。

CSS

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

img {
      height:100%;}

HTML

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

结果符合预期，但在任何非webkit浏览器中查看时，图像右侧（div内）都有大量空白。

在我的布局中，我希望将这些div中的许多div排成一行（浮动），因此必须使div的宽度缩小到图像的宽度。

Answer 1

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

您的div设置为100%高度，与容器高度相关，不它的内容。

您也无需在图像上指定100%。这只会使图像拉伸达到其容器高度的100％。除非你指定一个容器高度，否则这是毫无意义的。

Answer 2

我不知道我是否理解了这个问题，但在这里：

.container { display: inline-block; height: 100%; }
.container img { height: 100%; }

上的示例