2016-05-31 43 views
1

我有一個網頁,其寬度爲1200px,有一些3/4列,每個都有一個圖像,即每個圖像可能爲300/400像素寬。在崩潰時,在斷點(768)下面,圖像顯示模糊,因爲它們的寬度縮放爲768px。 我想讓事情儘可能小,但我認爲我必須使用更大的圖像,通過大型桌面視圖上的媒體查詢和1:1(幾乎)平板電腦上的查詢來縮小圖像。在平板電腦上摺疊時,小響應圖像會顯得模糊

有沒有想法?

+1

使用較大的圖像將實現你想要什麼,但是你也可能想要考慮使用媒體查詢來檢測視網膜顯示設備,並且如果它們符合正確的條件則隱藏/顯示圖像。請參閱:https://css-tricks.com/snippets/css/retina-display-media-query/ 另外,你可以嘗試一個像這樣的jQuery庫:http://luis-almeida.github.io/unveil /。我自己並沒有使用它,但看起來它會做你所需要的,並且只會在請求時加載圖像。 – mmmoustache

回答

0

如果這是他們獲得的最大圖像,您可以將圖像上傳到768像素。如果您有大量圖像並且擔心服務器的連接速度較慢或帶寬下載時間過長,請考慮根據分辨率加載圖像。

你可以在這裏閱讀更多: http://www.html5rocks.com/en/tutorials/responsive/picture-element/

您還可以將Google響應圖像,看看會有什麼最適合你,或者建立自己的解決方案,如果你是成:)

相關問題