CSS调整图像大小

Question

我应该将什么添加到CSS中以使所有图像的两倍大？它必须在Firefox 12中工作。我不关心视觉质量下降。 HTML包含如下图像：<img src="foo.png">。所有图像都有不同的宽度和高度，我想按比例缩放它们：200％宽度和200％高度。

我知道我可以使用图像转换器来扩大PNG。但是，在这个问题中，我对仅支持CSS的解决方案感兴趣。

我知道我可以向width=... height=...标记添加两倍大<img，但这需要修改HTML（加上现有图像大小的自动检测），并且这个问题我对只有CSS的解决方案感兴趣。

Answer 1

你可以添加：

img {max-width:200%;}

到您的CSS？

这将是“自适应的”（或者是“响应性的？”）并且不会“强制”图像达到200％（宽度），但是允许它们缩放，直到并包括200％宽度，如果视口足够宽。

如果视口不够宽，您可以删除max-并明确“强制”200％宽度，这将导致水平滚动条。

据我所知，选择其中一个（height OR width，但不是两者都有），保留比例。

您可以直接在CSS中设置<img>元素的样式，该元素应该适用于HTML文档中的所有图片，通过<img>标记显示。

您可以指定：

img {width:200%;}

如果你想让它们“无论如何都是200％。”

Answer 2

您可以使用以下css3：

-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);

虽然，图像的布局好像占据了100％的空间（如位置：相对;）。

Answer 3

在页面的head部分启用JQuery。

<img src="foo.png" ID='scalable'>

$("#scalable").css("width", "200%");
$("#scalable").css("height", "200%");

Answer 4

对于仅使用CSS的跨浏览器方式，这似乎是不可能的。