如何围绕缩放的 IMG 缩小 DIV？答案

【问题标题】：How to shrink a DIV around a scaled IMG?如何围绕缩放的 IMG 缩小 DIV？
【发布时间】：2011-03-13 04:31:21
【问题描述】：

向所有 CSS 专家提出一个简单（可能有人会想！）的问题：我想在 IMG 周围收缩一个 DIV 紧贴。 IMG 是 600 x 800，我需要它小得多。所以我去{身高：100%; width: auto;} 并通过包装器 DIV 限制高度。但是，为了保持（我不知道的）AR，我无法修复 DIV 的宽度。我尝试将包装 DIV 设置为“display：inline-block”或“float：left”或“position：absolute”或...... - 不管：大多数浏览器都会将该 DIV 拉伸 800px 宽 - 完整的原始宽度-size IMG - 所以它看起来像这样：

[[IMG].......................]

奇怪的是，我可以在 DIV 中添加一些文本（只是为了测试），这些文本实际上会出现在缩放的 IMG 旁边：

[[IMG]你好世界........]

这里有人知道为什么 IMG 的原始尺寸很重要（对于确定宽度的尺寸，它不会影响高度）？我可以做些什么来缩小 DIV？

感谢收看。

编辑：为了测试 Pär Wieslander 的想法，我编写了一个小测试平台，应该有助于阐明我的想法：

<style type="text/css">  
  html, body {  
     height: 100%;  
  }  
  #dialog {  
     background: green;  
     height: 50%;  
     position: relative;  
  }  
  #frame {  
     border: 2px solid black;  
     display: inline-block;  
     height: 100%;  
     position: absolute;  
  }  
  #img {  
     height: 100%;  
     width: auto;  
  }  
</style>  

<body>  
  <div id="dialog">  
     <div id="frame">  
        <img id='img' src='...' />  
     </div>  
  </div>  
</body>

只需选择您选择的任何大 IMG。您应该会发现周围有一个莫名其妙的宽框架，并且图像已从高度方向挤压到绿色地毯上。

【问题讨论】：

提示：在寻找技术时，您可能希望使用“shrink wrap”作为搜索词；我已经看到这被用作您要解决的问题的通用名称。
到过那里，完成了，Matt，并拿到了电话簿 :-) 经过大量研究，Google 标记的大部分内容都很简单。我找不到任何关于为什么原始图像大小的概念应该超出缩放比例的提及。特别是，因为它只是一维，似乎并没有阻止其他元素洗牌。真的很奇怪。

标签： css html image

【解决方案1】：

如果您将图像的宽度或高度指定为百分比，则该百分比将按父块大小的比例计算。所以在图像上指定width: 50% 并不意味着原始图像宽度的50%——它意味着父块宽度的50%。高度也是如此。因此，只要您将宽度或高度指定为百分比，图像周围总会有额外的空间。

解决方案很简单——以像素、ems 或除百分比以外的任何其他单位指定尺寸：

HTML

<div class="wrapper">
  <img class="small" src="myimage.jpg">
</div>

CSS

img.small {
  width: 150px;    /* or whatever you like */
  display: block;  /* to avoid empty space below the image */
}

div.wrapper {
  display: inline-block;
  border: 1px solid #000;
}

编辑：根据您的 cmets 和更新的帖子，我了解您真正想要做的是设置周围 div 的宽度并使图像填满该 div。下面是一个例子：

HTML

<div class="wrapper big">
  <img src="myimage.jpg">
</div>

<div class="wrapper small">
  <img src="myimage.jpg">
</div>

CSS

img {
  display: block;
  width: 100%;
}

.wrapper {
  margin-top: 1em;
  border: 1px solid #000;
}

.big {
  width: 600px;
}

.small {
  width: 300px;
}

【讨论】：

有趣的想法。我理解你所说的是，我应该尝试确定它的宽度，而不是设置包装器 DIV 的高度。这限制了 100% 宽的 IMG 的宽度，我应该让它通过设置 { height: auto; 来找到它的 AR； } - 然后 DIV 将不会在高度上扩展到原始 IMG 的全高。我需要几分钟来测试。我很欣赏这个主意。
您可以轻松地应用相同的原则，同时设置 div 的高度。在这种情况下，您需要将图像的高度设置为 100% 并保持其宽度不变，并使用浮动或display: inline-block 确保 div 的宽度不会超出图像的宽度。
抱歉有点笨，Pär，你如何在这个网站上包含 HTML？我要精神了。我试过你的建议，没有什么区别。我想在原始编辑中包含我的 HTML 以促进我们的交流，但我没有成功创建这些灰色块引号。我有 4 个空格，我尝试了
```
 ...没有任何效果。你是怎么做到的？
```
你需要缩进你的代码四个个空格——你的部分代码只缩进了三个空格；这就是为什么它不起作用。我现在已经修复了缩进。
我根据您的代码添加了一个示例链接，该链接应该在支持display: inline-block 的浏览器中工作。如有必要，它可以很容易地调整为使用浮点数。

【解决方案2】：

所以我选择 height="50%" 和 width="auto"（以保持 AR）。

为什么不直接去width="50%"，因为这样可以解决问题。

【讨论】：

感谢您的快速回答。我很抱歉 - 在一个非常深夜的编程会议之后早上太早了:-(我更正了 OP。我正在尝试使用包装器 DIV（可调整大小）使整个组合变得灵活。在真正的样式中， IMG 是 100%!! 在 DIV 的高度上，并且 DIV 的宽度必须提供以适应 AR - 无论可能是什么。

【解决方案3】：

我认为 Pär 的做法是正确的：不要做 { height: fix;宽度：自动； } 但改为 { height: auto;宽度：固定；效果更好。

【讨论】：

我很高兴向大家报告，大部分情况下它的效果都很好。我有 Chrome、Opera 和 FF 工作。 IE 仍在发挥作用，但这只是课程的标准（叹气）......