11

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

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

这是小提琴：

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

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

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

4

5 回答 5

3

自从我提出这个问题后，我取得了一些进展，解决方案非常简单：只需添加 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/

于 2013-05-19T11:15:43.440 回答
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>
于 2013-05-20T18:15:37.103 回答
0

我知道（或此刻能想到的）使容器与其内容的大小匹配的唯一方法是通过floating 它。如果这是一个选项，那可能会得到你想要的。（这是您更新的小提琴，已float:left;添加到.vertainer http://jsfiddle.net/EdgKr/61/）

于 2013-01-18T19:30:04.013 回答
0

如果你只是想让容器匹配图像的高度和宽度，也就是收缩包装，有几个选项：

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

如果没有指定宽度，每一个都会导致收缩包装效果。

我建议为此使用 inline-block。

此外，似乎 display:table 工作得很好：

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

但是 IE7 不支持它，所以我个人会使用 inline-block 代替。

于 2013-01-18T19:35:20.590 回答
0

非常简单

添加display: inline-block到.container

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

http://jsfiddle.net/z7CT6/

于 2013-05-23T22:44:50.793 回答