我正在尝试根据自身的百分比调整图像的大小。例如，我只想通过将图像大小调整为 50% 来将图像缩小一半。但是申请 width: 50%;会将图像调整为容器元素的 50%(父元素，例如 <body>)。
问题是，我可以在不使用 JavaScript 或服务器端的情况下根据自身的百分比调整图像大小吗？ (我没有图像大小的直接信息)
我很确定你不能这样做，但我只是想看看是否有仅智能 CSS 的解决方案。谢谢!
最佳答案
我有两种方法给你。
方法一
此方法仅调整图像的视觉尺寸而不是 DOM 中的实际尺寸，并且调整尺寸后的视觉状态在原始尺寸的中间居中。
img {
transform: scale(0.5);
}<img src="https://via.placeholder.com/300x200" />浏览器支持说明: 浏览器统计信息显示在 css 中。
方法二。
#wrap {
overflow: hidden;
position: relative;
float: left;
}
#wrap img.fake {
float: left;
visibility: hidden;
width: auto;
}
#img_wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#img_wrap img.normal {
width: 50%;
}<div id="wrap">
<img class="fake" src="https://via.placeholder.com/300x200" />
<div id="img_wrap">
<img class="normal" src="https://via.placeholder.com/300x200/cccccc" />
</div>
</div>注意:img.normal和img.fake是同一张图片。
浏览器支持说明:此方法适用于所有浏览器，因为所有浏览器都支持方法中使用的 css 属性。
该方法以这种方式工作:
#wrap和#wrap img.fake有流#wrap有overflow: hidden因此它的尺寸与内部图像相同 (img.fake)img.fake是#wrap中唯一没有absolute定位的元素，因此它不会破坏第二步#img_wrap在#wrap内有absolute定位，并在尺寸上扩展到整个元素(#wrap)- 第四步的结果是
#img_wrap和图片有相同的尺寸。 - 通过在
img.normal上设置width: 50%，它的大小是#img_wrap的50%，因此是原始图像大小的50%。
关于html - 如何使用 CSS 将图像调整为自身的百分比？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8397049/