響應式設計怎麼讓圖片自適應？

12-13

有一張大圖片我用的img 標籤，想讓它在不同屏幕能自適應，我改過圖片可以變小,自適應屏幕，但是整個圖片變得不清晰

圖片確實是響應式設計的一大問題

圖片分為背景圖片和通過img標籤引入的圖片，前者可以通過media query自動的切換不同解析度的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級的調整大小（也就是在media query切換css的點上可以換一張不同解析度的圖，但是沒法兒獲得兩張解析度中間大小的版本），而且在很多情況下（比如cms中）並不適合用背景圖片。

如果是img標籤引入的圖片，可以使用延遲載入的方式來載入，在實際載入圖片之前先用js檢查窗口寬度，然後載入不同解析度的圖片，比如寬度&<=480,就載入80px寬度的圖片，480 &< 寬度 &<= 768，載入120px的圖片，寬度&> 768則載入160px的圖片，如果寬度是600px怎麼辦呢，通過百分比來縮放120px的圖片達到合適的結果。

這樣做的好處是對於移動設備來說，下載的圖片會小一些，減少網頁載入的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而產生一定的模糊感。

我覺得響應式設計中對於圖片的考慮應該從布局設計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。

【3種最常見的響應式設計問題及規避錯誤的策略】

響應式設計方法對開發者非常有用，因為它使我們的內容在各種設備上廣為傳播。不用保留幾個獨立版本的網站，也可以摒除諸如縮放和流式布局這些方法的弊端。

縮放、流式布局與響應式

這些術語容易造成混淆，設計師常常錯誤地交替互用。實際上，每個都是布局技巧的顯著進化過程，像技術演進那樣逐一顯現。

縮放布局，旨在相對縮放每一個元素。它們會隨著窗口大小變化動態縮放內容，就這方面而言，它們是響應式的。布局本身保持靜止，通過改變每一個元素來保持一致的表現。

上圖：不同解析度下縮放布局的例子，這種設計為了統一犧牲了易讀性。

流式布局就不一樣，因為它們隨著窗口尺寸縮放容器元素。通過em這類相對單位可以做到這點，克服了縮小文字的問題。用戶主動縮放時，設計就被破壞了。

上圖：不同解析度下流式布局的例子，這種設計為了易讀性犧牲了統一。

響應式設計不會縮放任何東西。相反，它會根據窗口尺寸決定顯示哪些內容。

上圖：不同解析度下響應式布局的例子。

災禍1：菜單折行

如果在頁面頂部使用了導航欄，當頁面展現在小屏幕上時，響應式設計通常會把它「掰」成更緊湊的格式，但這並非總是有效，如果顯示區域比斷點更寬，又不足以在一行顯示所有菜單項的話。結果會導致菜單的折行。

有些方法可以解決這個問題。其一，減少導航欄中橫排菜單項的數量，將它們分門別類。然後選中某類時，你可以通過下拉菜單來顯示子類。

其二，減少斷點的數值。應該以導航欄開始出問題的實際數值為準，而非具體設備尺寸。

其三，不同設備使用不同方式，例如滑動抽屜。

災禍2：使用固定寬度圖片

內容區域通常都隨窗口尺寸變化。所以當固定寬度圖片超出顯示區域時，圖片就被裁剪了。

上圖：糟糕的固定寬度圖片例子，它太大了。於是出現了滾動條，內容被推到屏幕之外。

通過給圖片設定相對單位，可以避免這個問題。或者使用支持響應式的框架（比如Bootstrap），使用響應式圖片class名來控制（例如 class=」img-responsive」）。

上圖：同樣的元素，用響應式圖片class名的方式，滾動條就不見了。災禍3：元素的扭曲

這有點晦澀難懂，但本質上，布局顯示在小窗口上的時候，所有未經處理的列都會以行的形式呈現。這是個問題，因為內容的扭曲會不經意地改變設計的層級。

上圖：列變成了行，扭曲了內容。

解決方法顯而易見，但令人驚奇的是，仍有很多人在糾結它：只要明確地設定元素的寬度、高度、內邊距。如果它移出所處位置，蓋住了其他元素，可以通過將它包裹在div容器中，設置外邊距，迫使它回到原本的地方。

更多好文章請關註：

http://weixin.qq.com/r/azrB2YbE6NuXrcK69295 (二維碼自動識別)

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

首先，題主的意思是不同屏幕適配不同解析度照片，並不是width:100%...

我的理解是題主已經設置了 width:100%，但是由於圖片尺寸，在有的設備（高解析度設備）上就模糊了，所以首先你得按照不同寬度準備好幾張照片，達到為不同設備載入不同圖片的目的，這便是響應式圖片。

CSS 設置 Background 的方法是以前的方案，我這裡提一個「未來的解決方案」

此解決方案已經被用於實際生產中，WordPress 4.4+ 所有圖片都是使用這種方法自適應的！

此方法為HTML5偉大的新特性，專門用來解決響應式圖片的，同時向下兼容所有屏幕尺寸，無需額外JS/CSS，完美適配所有屏幕（各種device pixel ratio，屏幕尺寸）

通過 srcset + size 屬性以及 w 標識符，輕鬆解決一切。除了IE/Edge之外，Chrome 38+、Firefox 38+、Safari 9+、Opera 30+、Android 5.0+、iOS 9+ 都支持（兼容性一般，所以說是「未來的解決方案」）。代碼雖然不好看，但是比其他的省事多了。經測試，貌似最新的 iOS 8.4.1 也支持這個新屬性了！

此方法特別適合用於 cms 中，不破壞原意，同時也適合大量圖片的情況。

&

詳解：https://ze3kr.com/2015/08/using-srcset/

GitHub上的鏡像：ZE3kr/2015-08-17-using-srcset.md at master · ZE3kr/ZE3kr · GitHub

關於自動生成不同圖片尺寸解析度的服務，中國是有的，我目前用的是 UPYUN，通過自定義版本（【功能介紹】縮略圖版本配置注意要使用的是限定寬度，高度自適應），來實現各種解析度圖片。

img{ width: 100%; height: auto;max-width: 100%; display: block; },如果背景圖片，就用background-size

總結起來就兩條：
1.怕麻煩，width設成100%妥妥的。
2.不怕麻煩，媒體查詢一個個的解析度情況下設置。

《Head First Mobile Web》書里提到過一個叫http://Sencha.io Src的第三方服務，把img的src屬性設置為http://scr.sencha.io/http://xxxxxxxxxxxxxxxxxx(自己的圖像域和路徑)，http://Sencha.io Src會根據訪問設備的解析度來壓縮原圖創建一個適合它的圖像提供給訪問設備。
當然，這個http://Sencha.io是個國外的服務，在國內表現如何我也不得而知，也許國內也有類似的第三方服務？我只是個菜鳥，只是希望能給題主提供個思路，如果說的不對，還請指正。

和題主遇到類似的問題，不過我是要在不同手機解析度下面把圖片變成正方形。

以下方法是在網上找到的，測試了一下有效果
widht: 50%;/*屏幕對一半*/
height:50vw; /*是相對當前視口寬高中較小的一個的百分比單位*/ 根據實際情況調參數大小。

下面貼一下方法和原理。

CSS3 中新增了一組相對於可視區域百分比的長度單位 vw, vh, vmin, vmax。其中 vw 是相對於視口寬度百分比的單位，1vw = 1% viewport width， vh 是相對於視口高度百分比的單位，1vh = 1% viewport height；vmin 是相對當前視口寬高中較小的一個的百分比單位，同理 vmax 是相對當前視口寬高中較大的一個的百分比單位。

該單位瀏覽器兼容性如下：

利用 vw 單位，我們可以很方便做出自適應的正方形：

https://idiotwu.me/study/responsive-square/#viewwidth

優點：簡潔方便

缺點：瀏覽器兼容不好

都是寬度100%

沒給出代碼呀

圖片都是100%，外層可以套個li，根據屏幕尺寸，改變寬度即可。