如何将网页上图像的大小加倍？

Question

我有一个图像,比如尺寸为320 x 240像素,我希望在网页上显示两倍大小(即640 x 480像素).在过去,我已经通过设置这样做width=640的img标记.

但是,我刚刚在HTML规范中发现了以下内容:

尺寸属性不用于拉伸图像.

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

Answer 1

您可以使用CSS代替.跳到脑海的两种方法是使用宽度或比例变换.

例如img { width: 640px; }.这将保持适当的宽高比而不指定高度.

img {
  width: 640px;
}

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

例如 img { transform: scale(2) }

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

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

Answer 2

您可以设置父图像容器的尺寸

.imageContainer {
  width: 640px;
  height: 480px;
}

img {
  width: 100%;
  height: 100%
}

<div class="imageContainer">

  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqdnZQDnZOOyBGXXB23WS87IAxZ85drC-ylgrqWCqYk2aEh3Vo">
</div>

Answer 3

通过CSS,理想情况下在样式表中,但style必要时在属性中.

例如,这是你的32x32 gravatar拉伸到128x128:

.stretch-128 {
  width: 128px;
  height: 128px;
}

<img src="https://www.gravatar.com/avatar/6b938dc4205cd0cea4e4e68451c42a21?s=32&d=identicon&r=PG" class="stretch-128">

当然,无论何时拉伸这样的图像,质量都可能受到影响.