用百分比高度包裹浮动div的百分比图像

对不起，问一个非常明显的问题我确信它有一个非常简单的答案，我只是无法弄清楚。用百分比高度包裹浮动div的百分比图像

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

CSS

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

img { 
     height:100%;}

HTML

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

结果是如预期，但在任何非webkit的观察时大量空白的图像的右侧（在div内）浏览器。

在我的布局中，我希望有很多这样的div排成一排（用float），所以它的基本要素是div的宽度缩小到图像的宽度。

2011-12-02 osnoz

缺省情况下，div而不指定高度尺寸只扩大足以涵盖其内容。没有指定的宽度，div将扩大到其父项的宽度。因此，除非指定宽度，否则div的宽度不会缩小到图像上。

你div设置为100%的高度，这是相对于其容器高度，不其内容。您也不需要在图片上指定100%。这只会使图像拉伸到其容器高度的100％。除非你指定一个容器高度，否则这是毫无意义的。

2011-12-02 22:31:24 Sparky

对不起的例子中，没有作出明确一点，T想要的形象伸展到容器高度的100％，这是身高的100％。 – osnoz

@osnoz，我想你应该发布一个jsFiddle的例子。此外，你的愿望不会使我的答案无效。如果您不希望div水平展开，则必须指定宽度。 – Sparky

我想div扩展为适合内容，我不能指定宽度，因为我不知道它会是什么（百分比布局） – osnoz

我不知道如果我理解正确的问题，但这里有云：

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

2011-12-04 02:19:23 vlgalik

回答