css - 将 div 缩小为具有百分比高度的图像

Question

我想让容器的宽度缩小到图像的大小。高度以相对于浏览器窗口的百分比给出。

.img
{
    width: auto;
    height:100%;
}
.container
{
    height:100%;
    width:auto;
}

这是 fiddle :

http://jsfiddle.net/EdgKr/68/

display:table，在类似情况下不起作用，因为作为表格单元格，图像始终显示其原始大小的 100%。

http://jsfiddle.net/EdgKr/67/

Answer 1

自从我提出这个问题后，我取得了一些进展，解决方案非常简单:只需添加 float:left。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height:100%;
    width:100%;
}

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

.img {
    width:auto;
    height:100%;
}

即使图像具有百分比高度，容器也会按预期收缩。 http://jsfiddle.net/EdgKr/74/

但是它很容易被破坏，例如，如果你添加填充。 http://jsfiddle.net/EdgKr/72/