我一直在開發一個1440 * 900分辨率監視器的網站。該網頁有許多圖像排列成網格狀結構。它們之間的圖像大小和空間是根據我使用的顯示器設置的。但是當我在1280 * 800屏幕分辨率的顯示器上測試時,圖像出現對於屏幕來說太大(如預期的那樣)! ! 任何人都可以建議如何調整圖像大小和它們之間的空間基於用戶的屏幕分辨率.. Thanx ..根據分辨率調整圖像尺寸
0
A
回答
1
您也可以嘗試通過相對百分比設置圖像的寬度與父容器。例如
<div class="imgWrapper">
<img src="something.jpg">
</div>
然後在CSS:
.imgWrapper img {
width:100%;
}
如果對您的圖像相同的寬度和不同的寬度在不同的部分:
附加MAX-寬度,除了寬度: 100%;
+0
thanx的幫助:) – sachin11 2012-03-07 06:41:10
1
您可以使用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/
相關問題
- 1. 根據屏幕尺寸/分辨率調整圖像大小
- 2. 根據圖像尺寸和像素的分辨率
- 3. 根據屏幕分辨率調整表格尺寸
- 4. Android根據設備的屏幕尺寸調整圖像尺寸
- 5. 根據使用HTML5和CSS3的屏幕分辨率調整身體尺寸
- 6. android尺寸分辨率
- 7. iPhone 4圖像分辨率和圖像尺寸
- 8. 調整DICOM圖像的分辨率
- 9. Node.js調整圖像尺寸
- 10. 支持多種分辨率時的分辨率與尺寸
- 11. 圖像的尺寸,分辨率和質量建議
- 12. 減少圖像尺寸,但保持最高質量/分辨率?
- 13. 圖像尺寸/分辨率基於網頁佈局
- 14. java設置圖像的分辨率和打印尺寸
- 15. 如何改變分辨率或降低尺寸的圖像
- 16. Marmalade Sdk屏幕尺寸分辨率
- 17. 高分辨率UITabBar圖標在低分辨率屏幕上全尺寸顯示
- 18. Bootstrap 3 - 根據尺寸調整CSS
- 19. 如何根據不同的分辨率調整android webview中的圖像大小?
- 20. 根據標籤尺寸調整面板的尺寸
- 21. 根據屏幕尺寸調整按鈕尺寸
- 22. 根據內容的新尺寸調整NSWindow的尺寸查看
- 23. 什麼是iPhone 7(新)屏幕分辨率,像素和尺寸?
- 24. AS3網絡攝像頭分辨率/尺寸問題
- 25. 使用php調整圖像尺寸
- 26. 調整圖像尺寸iPhone SDK
- 27. 當屏幕尺寸減小時自動調整圖像尺寸
- 28. 使用Graphics.DrawImage調整圖像尺寸結果尺寸調整不正確
- 29. 根據屏幕尺寸更改圖像
- 30. 根據圖像尺寸更改interfaceOrderation
您可以使用%來進行測量。然後,每次都有相同的元素大小與屏幕大小的比例。 – 2012-03-05 15:15:56