将 div 缩小到具有百分比高度的图像答案

【问题标题】：Shrink div to image with percentage height将 div 缩小到具有百分比高度的图像
【发布时间】：2013-01-18 19:10:15
【问题描述】：

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

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

这是小提琴：

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

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

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

【问题讨论】：

我不知道你在追求什么...是这个jsfiddle.net/EdgKr/59 吗？
我相信他们希望容器 div 在高度减小时与图像宽度匹配。在小提琴中，如果您缩小结果面板的高度，您可以看到图像右侧的绿色。
display:table 将照常工作，但需要应用于 div 而不是图像。
是的。该图像具有显示：内联。它的容器显示：table-cell。换行显示：表格。
更新：我稍微改变了小提琴并添加了填充，以解决问题。绿色框应缩小到图像的宽度。

标签： css image containers jsfiddle

【解决方案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/

【讨论】：

基本上就是汤姆所说的。但是汤姆斯的解决方案不起作用，所以我花了一段时间才发现他的答案是正确的。
如果有人能解决这个填充问题，那就太好了。在我的理解 box-sizing:border-box 应该足够了。这可能是一个错误吗？

【解决方案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>

【讨论】：

这在右边仍然没有填充。并且它需要重置身体上的位置和边距。请拉小提琴。
I made a fiddle and some corrections. 有谁知道，为什么容器底部有点突出？好像不影响布局，但是为什么会出现呢？
编辑：它确实会影响布局。但效果微乎其微。
亲爱的主，我已经解决了这个问题，现在它可以完美表达了。请看小提琴：jsfiddle.net/PLXWq/1

【解决方案3】：

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

【讨论】：

这不是我的意思。绿色容器的宽度应缩小以匹配图像。
我们是 :) 图像是内容，如果 float 设置为 left 或 right，容器将缩小以适应该内容。你应该在我的回答中看到这个。
没有。我看到一个长长的绿色容器。唯一的区别是，wrap 现在有一个滚动条。
啊，我明白了。是的，我的错。这仅在页面首次加载时有效，但在缩小时不适应。我会继续思考，并留下这个答案，以防有人以我的方式思考 - 让他们免于犯错的麻烦:)

【解决方案4】：

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

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

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

我建议为此使用 inline-block。

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

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

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

【讨论】：

Display:table 仅适用于 100% 高度。尝试另一个值，它会中断。
向右看，容器比图片长。
我能够复制问题。但是在我看来，您还没有查看我的代码，实际上它工作得很好。你需要删除 html 和 body width: 100%;
我查看了您的代码并将输出窗口向右滚动（代码没有任何更改），绿色框比图像长。我正在使用最新的 Firefox。
我现在在 Firefox 上看到了。但是使用 display:table 的 jsbin.com/isayar/1/edit 似乎正在工作，至少看不到绿色，无论是右侧还是左侧。

【解决方案5】：

很简单

将display: inline-block 添加到.container

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

http://jsfiddle.net/z7CT6/

【讨论】：

小提琴中的容器没有正确收缩。右边还有一些绿色显示。
我无法重现您的错误。请写下您的浏览器版本和操作系统
Windows 7，最新的 Firefox。在 IE 中也一样。 Safari 和 Chrome 不显示绿色，但右侧没有填充。