调整图像显示的大小

Question

我不会将其显示为缩略图，但CSS可以帮助将尺寸为1000x1000的图像压缩为尺寸为500x500的图像吗？

我的图片CSS看起来像这样：

.images {
  background:url("image.png") no-repeat scroll; // this is a 1000x1000 sized image
}

如何覆盖此内容？我不想生成另一个大小为500x500的图像。

Answer 1

您可以使用CSS3 background-size：

.images{
    background:url("image.png") no-repeat scroll;
    background-size:500px 500px;
}

但是这会调整图像的大小 AFTER 它已被降级。最好的方法是使用PHP（或类似的） BEFORE 调整图像大小。

如果您无法在服务器端调整大小并希望它是跨浏览器，您也可以使用

HTML：

<div class="images">
    <img class="bg" src="image.png" alt="My image" />
    Content
</div>

CSS：

.images{
   position:relative;
}
.images>.bg{
   height:500px;
   width:500px;
   position:absolute;
   top:0;
   left:0;
   z-index:-1;
}

（您可以设置height和width，但只需要其中一个。）

Answer 2

background-size: 500px 500px;

但ie7和ie8不支持。

如果要在图像标记中显示，可以设置图像标记的宽度和高度。您可以通过绝对定位图像伪造背景。

<img width="500" src="..." />

如果您已经在其他地方使用该图像，那么重用它并调整其大小可能是个好主意。