调整图像显示大小

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; 
} 

但是，将调整图像后已经dowloaded。最好的方法是用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，但只需要其中一个）。

Answer 2

background-size: 500px 500px; 

但它不支持ie7和ie8。

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

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

如果您已经使用图像别的地方可能是重用和调整是个好主意。