引導響應式圖像縮放

Question

使用Twitter Bootstrap我意識到，默認情況下它響應地縮放圖像。這很棒，但並不總是完美的。

舉例來說，我在桌面上有一個500x300圖像，然後調整大小以適應移動設備，圖像會變得非常小而不是很高，從而丟失圖像的大部分細節。

我已經看到其他網站實際上不會縮放圖像太多，而是使用父div來排序mask圖像。 （http://www.fitnessfireworks.com就是一個很好的例子，不再可用。）

什麼是最好的方法來實現這個目標？ CSS背景圖像和背景圖像縮放的組合？只是尋找最佳實踐。

Answer 1

如果圖像質量很重要，我會使用兩個圖像使用不同的類聲明。外部工具在縮放圖像方面總是比在瀏覽器上實時更好。

Answer 2

您可能會發現this文章有用。它解釋了關於響應顯示優化的圖像和避免多次圖像下載

Answer 3

我已經看到了其他網站居然不縮放圖像多，而在於使用父div來排序的掩蓋圖像

如果你檢查你提到的頁面上CSS，你會看到，而不是使用imline圖像，它們通常被定義背景圖片的div，並使用CSS像

#some-div { 
background-size: 100%; 
background-size: cover; 
background-position: center center; 
vertical-align: top; 
background-image: url(/.../image.jpg); 
} 

這裏是你如何能得到與VS background-image內嵌圖像的縮放比例完全不同的結果的例子。

http://www.bootply.com/67094

關鍵第二種方法是使用背景尺寸：蓋並操縱div的尺寸（以及因此的背景圖像的大小）。

http://css-tricks.com/perfect-full-page-background-image/大約有變化，並選擇與background-cover好的信息。