html - 调整图像显示的大小

Question

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

我的图像 CSS 如下所示：

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

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

Answer 1

background-size: 500px 500px;

但是ie7和ie8不支持。

如果要将其显示在图像标签中，则可以将宽度和高度设置为图像标签。您可以通过绝对定位图像来伪造背景。

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

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

Answer 2

您可以使用 CSS3 background-size：

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

但这将在下载后调整图像大小。最好的方法是在用户下载图像之前使用 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但只需要其中一个）。