Question

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

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

这是小提琴：

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

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

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

Answer 1

自从我提出这个问题以来，我取得了一些进展，解决方案非常简单：只需添加浮动：左。

* {
    -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/

Answer 2

我想我能更好地解决这个问题。请检查我的代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <style type="text/css">
            * {
                -webkit-box-sizing: border-box; /* Android = 2.3, iOS = 4 */
                -moz-box-sizing: border-box; /* Firefox 1+ */
                box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
            }
            html, body
            {
                height:100%;
                width:100%;
                padding:10px;
            }
            .container {
                padding:0;
                background:green;
            }
            .img {
                display: inline;
                height:100%;
            }
        </style>
    </head>
    <body>
       <span class="container">  
            <img class="img" src="a.jpg"/>
        </span>
    </body>
</html>

Answer 3

我知道（或者现在可以想到）让容器与其内容大小匹配的唯一方法是float。如果这是一个选项，那可能会得到你想要的东西。（这是您将float:left;添加到.vertainer http://jsfiddle.net/EdgKr/61/的更新小提琴）

Answer 4

如果您只是希望容器匹配图像的高度和宽度，又称收缩包装有几个选项：

浮动：左/右，显示：内联块，显示：表，位置：绝对的;

如果没有指定宽度，

每个都会导致收缩包装效果。

我建议使用内联块。

此外，它似乎显示：表工作得很好：

http://jsbin.com/isayar/1/edit

然而，在IE7中不支持它，所以我个人会选择使用内联块。

Answer 5

非常简单

将display: inline-block添加到.container

它在你的小提琴上显示绿色的原因是显示块使其适合整个宽度

http://jsfiddle.net/z7CT6/

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

5 个答案: