图片百分比 html,HTML - CSS图像调整自身的百分比？

HTML - CSS图像调整自身的百分比？

我试图用自己的百分比来调整img的大小。 例如，我只想将图像缩小到50％，将图像缩小一半。 但应用width: 50%;会将图像大小调整为容器元素的50％(例如，可能是

的父元素)。

问题是，我可以在不使用javascript或服务器端的情况下用一定比例调整图像大小吗？ (我没有图像大小的直接信息)

我很确定你不能这样做，但我只想看看是否有智能的CSS解决方案。 谢谢！

Min Ming Lo asked 2019-08-25T06:28:56Z

9个解决方案

98 votes

我有2种方法。

方法1.在jsFiddle上演示

此方法仅调整图像大小，而不是DOM中的实际尺寸，以及调整大小后居中于原始大小中间的视觉状态。

HTML：

CSS：

img {

-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */

-moz-transform: scale(0.5); /* FF3.5+ */

-ms-transform: scale(0.5); /* IE9 */

-o-transform: scale(0.5); /* Opera 10.5+ */

transform: scale(0.5);

/* IE6–IE9 */

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');

}​

浏览器支持说明：浏览器统计信息显示在width: 50%中。

方法2.在jsFiddle上演示

HTML：