根據分辨率調整圖像尺寸

我一直在開發一個1440 * 900分辨率監視器的網站。該網頁有許多圖像排列成網格狀結構。它們之間的圖像大小和空間是根據我使用的顯示器設置的。但是當我在1280 * 800屏幕分辨率的顯示器上測試時，圖像出現對於屏幕來說太大（如預期的那樣）！！任何人都可以建議如何調整圖像大小和它們之間的空間基於用戶的屏幕分辨率.. Thanx ..根據分辨率調整圖像尺寸

來源

2012-03-05 sachin11

您可以使用％來進行測量。然後，每次都有相同的元素大小與屏幕大小的比例。 – 2012-03-05 15:15:56

您也可以嘗試通過相對百分比設置圖像的寬度與父容器。例如

<div class="imgWrapper"> 
<img src="something.jpg"> 
</div>

然後在CSS：

.imgWrapper img { 
width:100%; 
}

如果對您的圖像相同的寬度和不同的寬度在不同的部分：

附加MAX-寬度，除了寬度： 100％;

來源

2012-03-05 15:20:10 Ben

thanx的幫助:) – sachin11 2012-03-07 06:41:10

您可以使用CSS媒體查詢的組合和設置圖像的寬度在CSS中。因此，對於屏幕尺寸最大寬度1440，例如，css圖像寬度將設置爲width: 200px;。那麼對於屏幕尺寸最大寬度1280，設置圖像寬度別的東西，像width:120px

這裏是一個不錯的媒體查詢教程：http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

來源

2012-03-05 15:15:01 Ben

根據分辨率調整圖像尺寸

回答

相關問題