調整圖像大小html/css

Question

我在Facebook應用程序中有幾個圖像。問題是，圖像相當大，我需要它看起來很好，無論是從電腦或手機訪問。考慮到不同的屏幕尺寸，將其設置爲某個固定維度顯然會使其看起來很糟糕。
那麼，我應該如何調整它的大小，使它在任何屏幕上看起來都不錯？

Answer 1

設置在img標籤寬度和高度爲百分比（其容器）：

<img src="http://..." alt="" width="50%" height="30%" /> 

調整百分比，以您的需求。

Answer 2

試試這個

img 
{ 
    width:100%;/*adjust this value to your needs*/ 
    max-width: the size of the image;/* so it wont get bigger and pixelated*/ 
    height:auto; 
} 

另一種選擇，如果可能的話，就是用媒體查詢，所以對於不同尺寸的瀏覽器，你可以加載圖像的不同尺寸。

這裏是一個fiddle，看看這是你正在努力實現

Answer 3

使用媒體查詢什麼。 例如：

@media all and (min-width: 1001px) { 
    img { 
    width: 100%; /* insert prefered value */ 
    height: auto; 
    } 
} 

@media all and (max-width: 1000px) and (min-width: 700px) { 
    img { 
    width: 100%; /* insert preferred value */ 
    height: auto; 
    } 
} 

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { 
    img { 
    width: 100%; /* insert preferred value */ 
    height: auto; 
    } 
}