向所有 CSS 大师提出一个简单的（有人可能会想！）问题：我想缩小 DIVsnugly围绕 IMG。 IMG 是 600 x 800，我需要它小得多。所以我去{高度：100％； width: auto;} 并通过包装器 DIV 约束高度。但是，为了维持（我不知道的）AR，我无法修复 DIV 上的宽度。我尝试将包装 DIV 设置为“display：inline-block”或“float：left”或“position：absolute”或... - 无论如何：大多数浏览器都会将该 DIV 拉伸 800px 宽 - 整个 DIV 的原始宽度-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>
随便选一个large您选择的 IMG。您应该会发现周围有一个莫名其妙的宽框，并且图像在高度上挤到了绿色地毯上。
如果将图像的宽度或高度指定为百分比，该百分比是根据父块的大小按比例计算的。所以指定width: 50%图像上的 并不意味着原始图像宽度的 50%——它意味着父块宽度的 50%。高度也是如此。因此，只要您将宽度或高度指定为百分比，图像周围总会有额外的空间。
解决方案很简单——以像素、em 或除百分比以外的任何其他单位指定尺寸：
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;
}
Edit:根据您的评论和更新的帖子，我知道您真正想要做的是设置周围 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;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
