13

我尝试过在 HTML 中使用：

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

在 CSS 中：

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

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

4

5 回答 5

11

您可以使用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，以便widthandheight属性将正确缩放它并影响元素流自然的方式。

于 2012-04-18T20:49:45.903 回答
8

您不能仅使用CSS < 版本 3。

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

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

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

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

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

于 2012-04-18T20:45:38.130 回答
3

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

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

.double img{
  width: 200%;
}
</style>
<div class="double"><img src="../Resources/title.png"></div>
于 2014-07-30T13:57:26.693 回答
0

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

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

“高度：100vh；” 意味着 100% 来自您的浏览窗口。只需计算一下即可。

于 2016-09-06T10:23:30.547 回答
0

您可以在图像上使用 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>

于 2019-02-18T23:17:16.647 回答