html - 调整图像显示的大小

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(或类似工具)在用户下载之前调整图像大小。

如果你不能在服务器端调整它的大小并且你希望它是跨浏览器的，你也可以使用

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，但只需要设置其中一个)。