調整圖像顯示大小

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="..." /> 

如果您已經使用圖像別的地方可能是重用和調整是個好主意。