html - 如何仅使用 CSS 将 HTML 中的图像大小加倍？

Question

我试过使用在 HTML 中:

<img src="../Resources/title.png" />

在 CSS 中:

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

但这会根据图像所在的父标签缩放图像。如果图像是 150px x 150px，我想将它缩放到 300px x 300px。我希望这适用于所有图像，无论它们的大小或父标签如何。而我只想使用 CSS。想法？

Answer 1

您可以使用 scale() 2D 转换来做到这一点，但它是 CSS3 华丽的新功能之一 support is incomplete at this time and you need vendor prefixes :

img {
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

但是我不认为这会考虑内容流，因为转换是在单个元素上完成的，因此不会影响布局。另见 transform-origin property .

如果您需要良好的浏览器支持，或者您需要内容正确重排，您将不得不使用替代方法，例如使用 JavaScript 或重构您的 HTML，这样 width 和height 属性将正确缩放它并以自然的方式影响元素流。