在 HTML 中将图像大小调整为原始大小的 50%

Answer 1

您在这里没有做任何错误，它会覆盖图像大小的任何其他事情。

你可以检查这个工作fiddle。

在这个小提琴中，我使用

%

更改了图像大小，并且它正在工作。

也尝试使用此代码：

<img src="image.jpg" style="width: 50%; height: 50%"/>​

这是示例小提琴。

Answer 2

我们也可以通过 css3 来做到这一点。试试这个：

.halfsize {
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
}

<img class="halfsize" src="image4.jpg">

• 受浏览器兼容性影响

Answer 3

百分比设置不考虑原始图像尺寸。 来自 w3schools :

在 HTML 4.01 中，宽度可以以像素或包含元素的百分比来定义。在 HTML5 中，该值必须以像素为单位。

此外，来自同一来源的良好实践建议：

提示：使用高度和宽度属性缩小大图像会迫使用户下载大图像（即使它在页面上看起来很小）。为了避免这种情况，请在页面上使用图像之前使用程序重新缩放图像。

Answer 4

您可以使用

x

属性的

srcset

描述符，如下所示：

<!-- Original image -->
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png" />

<!-- 80% of the original size (1/0.8=1.25) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 1.25x" />

<!-- 50% of the original size (1/0.5=2) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 2x" />

目前除IE外的所有浏览器都支持。 (caniuse)

MDN 文档