Question

我尝试过使用过在HTML中：

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

在CSS中：

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

但是这会根据图像所在的父标记来缩放图像。如果图像是150像素×150像素，我想将其缩放到300像素×300像素。我希望这适用于所有图像，无论它们的大小或父标记。我只想使用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和{{1属性将正确缩放它并以自然的方式影响元素流。

Answer 2

您无法使用 CSS＆lt;版本3 。

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

更新，因为这个答案发布已经有一段时间了。

正如评论者指出的那样，只需使用zoom CSS属性即可实现。但是，it's not recommended，因为它首先由IE实施，在IE6 / 7天和never formalized into the W3C standard。相反，现在常用的是使用scale函数的CSS转换。

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

实施例： https://jsfiddle.net/2n5zLhz3/

Answer 3

您可以将图像封装在 div 中，然后相对于父级设置其大小。

<style type="text/css">
.double{
  display: inline-block;
}

.double img{
  width: 200%;
}
</style>
<div class="double"><img src="../Resources/title.png"></div>

Answer 4

您可以从窗口大小中获取所需的百分比来加倍图像。

p > img {
  width:100%;
  height:60vh;
}

“高度：100vh;”意味着100％来自你的浏览窗口。只需要做数学运算。

Answer 5

您可以在图片上使用min-width属性，以强制宽度大于其父div，例如

.parent {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
img {
  min-width: 200%;
  /* center image */
  margin-left: -50%;
  height: auto;
}

<div class="parent">
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Information_example_page_300px.jpg" alt=""/>
</div>

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

5 个答案: