響應式設計 - 如何讓圖像在小屏幕上看起來很正常？

-3

在我的筆記本電腦屏幕上看起來不錯。但在我的手機瀏覽器上看起來很糟糕。特別是圖像看起來像一團糟。

可以做些什麼來確保圖像看起來不錯？

謝謝，亞歷克斯

2013-04-12 Genadinik

線的東西你需要這樣，當這個環節的變化，這個問題仍然具有歷史價值 –

使用媒體查詢到的風格元素爲移動設備。圖像使用百分比以及最大寬度和最小寬度值。

@media screen and (max-width:480px) { 
    //CSS sizes for mobiles only 
}

2013-04-12 21:35:29 Vector

謝謝你添加一些代碼和/或一個的jsfiddle。我對媒體元素有點困惑。所有的現代瀏覽器都能識別它們嗎？或者我必須導入一些CSS庫？ – Genadinik

IE7及其以下版本不支持媒體查詢 –

@CodyGuldner謝謝 - 因此，如果我創建了幾個相同的已命名媒體元素，那麼舊版瀏覽器將如何知道選擇哪個元素？ – Genadinik

不要爲你的圖片集像素messurements和使用CSS代替了的img標籤：

img { 
max-width: 100%; 
height: auto; 
}

2013-04-12 21:34:30 Omega

Omega看法是正確的，但你要設置的參數width也。我通常將width設置爲百分比值，將max-width設置爲像素值。這樣，一旦它超過了最大寬度，它實際上拋開了，只看寬度。沿着這

img { 
    max-width:500px; /*Once screen size is smaller than 500px, the image reverts to the width value*/ 
    width:100%; 
}

2013-04-12 21:38:17

感謝您的提及。我可能會錯過你的觀點。你說如果圖像超過500像素，那麼它會回落到100％的寬度屬性？當然，只要使用'max-width：100％'也能做到這一點嗎？默認情況下，圖像將以其自然尺寸顯示，除非在別處指定。 – Omega

@Omega'max-width：100％'將確保圖像永遠不會跨越瀏覽器寬度線。你可以使用它，但如果你有一個1700像素的屏幕，圖像應該是250x250的圖像，那麼這個圖像將會非常伸展和扭曲。所以我這樣做，所以圖像不會出來 –

因此，爲什麼你使用height：auto而不是爲圖像設置任何其他測量屬性。如果你指定它的測量值，它只會拉伸和扭曲。否則，它會顯示的最大值是自然尺寸...不是？ – Omega

回答