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

Question

我试过在 HTML 中使用：

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

在 CSS 中：

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

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

原文由 Justin Heather Barrios 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能仅使用 CSS < Version 3 。

当您在元素上设置宽度/高度时，它是相对于它的容器的。

---

更新，因为自发布此答案以来已经有一段时间了。

正如评论者指出的那样，这可以通过简单地使用 zoom CSS 属性来实现。但是， 不推荐 这样做，因为它最初是在 IE6/7 时代由 IE 单独实现的，并且 从未正式成为 W3C 标准。相反，现在常用的是使用 scale 函数的 CSS 转换。

有关 scale() CSS 函数的更多信息： https ://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

示例： https ://jsfiddle.net/2n5zLhz3/

原文由 Alex 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 scale() 2D 转换来执行此操作，但作为华丽的新 CSS3 功能 支持之一，目前还不完整，您需要供应商前缀：

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

但是我认为这没有考虑到内容流，因为转换是在单个元素上完成的，因此不会影响布局。另请参阅 transform-origin 属性。

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

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议