javascript - 如何将网页上的图像尺寸加倍？

Question

我有一张图片，尺寸为 320 x 240 像素，我想在网页上将其显示为双倍尺寸(即 640 x 480 像素)。过去，我通过在 img 标签上设置 width=640 来完成此操作。

但是，我刚刚发现以下 in the HTML specification :

The dimension attributes are not intended to be used to stretch the image.

在那种情况下，如何在不违背规范的情况下将网页上的图像大小加倍？

Answer 1

您可以改用 CSS。想到的两种方法是使用宽度或 scale转型。

例如img { 宽度:640px; }。这将在不指定高度的情况下保持适当的纵横比。

img {
  width: 640px;
}

<img src="http://www.placehold.it/320x240">

例如img { 变换:scale(2) }

img {
  transform-origin: top left;
  transform: scale(2);
}

<img src="http://www.placehold.it/320x240">