我在Facebook應用程序中有幾個圖像。問題是,圖像相當大,我需要它看起來很好,無論是從電腦或手機訪問。考慮到不同的屏幕尺寸,將其設置爲某個固定維度顯然會使其看起來很糟糕。
那麼,我應該如何調整它的大小,使它在任何屏幕上看起來都不錯?調整圖像大小html/css
0
A
回答
2
設置在img
標籤寬度和高度爲百分比(其容器):
<img src="http://..." alt="" width="50%" height="30%" />
調整百分比,以您的需求。
0
試試這個
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,看看這是你正在努力實現
1
使用媒體查詢什麼。 例如:
@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;
}
}
相關問題
- 1. 圖像未調整大小
- 2. 調整jpeg圖像大小?
- 3. codeigniter圖像調整大小
- 4. Phalcon圖像調整大小
- 5. JavaFx圖像調整大小
- 6. ckfinder圖像調整大小
- 7. 圖像調整大小Codeigniter
- 8. 調整圖像大小。 。 。 。
- 9. 圖像調整大小Java
- 10. 調整圖像大小
- 11. 調整圖像大小
- 12. 調整圖像大小5
- 13. php調整大小圖像
- 14. imageWithContentsOfFile調整圖像大小
- 15. 調整圖像大小
- 16. Opencart - 圖像調整大小
- 17. Kraken.io圖像調整大小
- 18. wordpress調整大小圖像
- 19. 調整大小。GIF圖像
- 20. iphone圖像大小調整
- 21. 調整圖像大小
- 22. 調整圖像大小
- 23. Magick.Net調整圖像大小
- 24. 調整圖像大小
- 25. CSS圖像大小調整
- 26. PIL調整大小圖像
- 27. 調整圖像大小,笨
- 28. Android圖像調整大小
- 29. JavaME調整圖像大小
- 30. c#圖像調整大小
是圖像內容還是界面的一部分? – 2013-04-04 16:47:52
它是內容的一部分,它是一個列表元素 – 2013-04-04 16:53:14