其實我並不需要它了，但只是出於好奇縮放...圖像的CSS
假設我們有一個流體網站佈局完美的作品以及在1920px的顯示器和小的智能手機。現在讓我們說，我們在那裏有圖像，很明顯（顯然是？）我們想要縮放它們。我們已經在服務器上上傳2560px圖像（因爲誰在乎現在的帶寬），並設置width: 100%屬性爲img標籤。
所以我們有兩個用戶：一個顯示1920px的程序員，我們稱他爲Jo，還有一個帶智能手機的女學生，讓我們給她打電話給Nancy（因爲Nancy一切都好，對嗎？）。
喬和南希很高興，因爲我們的計劃使用width: 100%縮放圖像進行縮放，但如果我們決定顯示小圖像，例如400px寬度，該怎麼辦？南希不會注意到任何事情，但對喬而言，這將是一場災難。
所以問題是：我們可以讓Jo和Nancy不用JavaScript而快樂嗎？
爲什麼不去max-width: 100%呢？
這將使所有小於屏幕寬度的圖像單獨顯示，而比屏幕寬度更寬的圖像也將調整爲100％。問題解決了，大家開心！
這絕對是在響應式網頁設計中做圖像的傳統方式。 – 2012-01-09 15:37:48
因爲這太容易了，當然！其實，你回答了我的問題，我從來沒有用'max-width'圖像，但我現在嘗試，它工作正常。謝謝。 – 2012-01-09 15:37:56
我要補充一點，你似乎需要添加一個'高度：auto'的圖像，以防止長寬比由偏快轉爲傾斜（至少在我現在使用的手機瀏覽器...） – 2012-11-04 19:59:30
如果您想根據寬度將不同的圖片發送到不同的屏幕，您應該深入瞭解我們一直聽到的有條件的媒體查詢。
這是一個不錯的網站：http://webdesignerwall.com/tutorials/css3-media-queries
謝謝，我已經幾乎在任何地方使用它們。我只是想，如果會出現我無法使用不同圖片的情況。 – 2012-01-09 15:45:12
我以前max-width: 100%作爲菲利普曾提到過，但我也需要包括：
height:auto
否則高度無法擴展。
什麼資格作爲使他們幸福嗎？另外，爲智能手機提供2560像素圖像是一個可怕的想法。 – 2012-01-09 15:27:51
如果我們的圖片在南希的智能手機上進行縮放，Jo會看到400px的圖片，而不會縮放，他們會很高興。 – 2012-01-09 15:30:26
你的意思是你已經設置圖像的寬度屬性設置爲100％，但''
？ –
MrMisterMan
2012-01-09 15:40:34