我正在尝试使用自身的百分比调整图像的大小。例如，我只想通过将图像大小调整为 50% 来将图像缩小一半。但是应用 width: 50%; 会将图像的大小调整为容器元素的 50%（例如 <body> 的父元素）。
问题是，我可以在不使用 JavaScript 或服务器端的情况下根据自身的百分比调整图像大小吗？ （我没有图像大小的直接信息）
我很确定你不能这样做，但我只是想看看是否有智能 CSS 解决方案。谢谢！
原文由 Min Ming Lo 发布，翻译遵循 CC BY-SA 4.0 许可协议
这一定是使用容器元素方法的最简单的解决方案之一。
使用容器元素方法时，此问题是 此 问题的变体。诀窍是让容器元素收缩包装子图像，因此它的大小将等于未调整大小的图像的大小。因此，当将图像的 width 属性设置为百分比值时，图像将相对于其原始比例进行缩放。
其他一些启用收缩包装的属性和属性值是： float: left/right ， position: fixed 和 min/max-width ，56–如问题中所述。每个都有自己的副作用，但 display: inline-block 将是一个更安全的选择。马特在他的回答中提到了 float: left/right ，但他错误地将其归因于 overflow: hidden 。
极客观点
项目管理
HarmonyOS
span {
display: inline-block;
}
img {
width: 50%;
}
<span>
<img src="https://via.placeholder.com/300x200"/>
</span>
编辑： 正如 trojan 所提到的，您还可以利用新引入的 CSS3 intrinsic & extrinsic sizing 模块：
figure {
width: intrinsic;
}
img {
width: 50%;
}
<figure>
<img src="https://via.placeholder.com/300x200" />
</figure>
原文由 user3829636 发布，翻译遵循 CC BY-SA 4.0 许可协议
3 回答981 阅读✓ 已解决
4 回答1.3k 阅读✓ 已解决
2 回答941 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
2 回答1.3k 阅读✓ 已解决
2 回答913 阅读✓ 已解决
2 回答1.1k 阅读✓ 已解决
我有两种方法给你。
方法一。
此方法仅调整图像的视觉尺寸而不是 DOM 中的实际尺寸，并且调整尺寸后的视觉状态居中于原始尺寸的中间。
浏览器支持说明： 浏览器统计信息显示在
css中。方法二。
注意：
img.normal和img.fake是同一张图片。浏览器支持说明： 此方法适用于所有浏览器，因为所有浏览器都支持
css方法中使用的属性。该方法以这种方式工作：
#wrap和#wrap img.fake有流量#wrap有overflow: hidden因此它的尺寸与内部图像相同（img.fake）img.fake是里面唯一的元素#wrap没有absolute定位，这样它就不会破坏第二步#img_wraphasabsolutepositioning inside#wrapand extends in size to the entire element (#wrap)#img_wrap与图像具有相同的尺寸。width: 50%onimg.normal, its size is50%of#img_wrap, and therefore50%of the original image尺寸。