如何實現響應式圖片
記錄幾種實現響應式圖片的方法。
一.,js或服務端
通過js或者服務端來控制圖片的載入，原理就是跟蹤window的resize事件，然後修改圖片的路徑，程式碼如下
<body> <div class="content"> <img src="" alt=""/> </div> <script src="js/vendor/jquery.min.js"></script> <script> $(document).ready(function () { function makeImageResponsive() { var width = $(window).width; var img = $(".content img"); if (width <= 480) { img.attr('src', 'img/480.png') } else if (width <= 800) { img.attr('src', 'img/800.png') } else { img.attr('src', 'img/1600.png') } } $(window).on('resize load', makeImageResponsive()); }) </script> </body>
這種形式還有一種類似的變種，就是通過把螢幕或者裝置資訊寫入cookie，獲取圖片的時候在伺服器端選擇返回哪種圖片，這樣就不需要我們來寫指令碼了。
二，srcset
通過js或服務端載入確實可以達到響應式圖片的目的，相容性也非常的好，但是需要我們編碼實現響應式的邏輯，在修改的時候也不是很方便屬於命令式的實現，以下方法使用宣告式的實現，就是把圖片的地址宣告在html中，由瀏覽器自行來決定如何載入，這樣更加靈活，把展示的邏輯從硬編碼中分離出來，降低了耦合。
<head> <meta charset="UTF-8"> <title>Title</title> <style> html, * { margin:0; padding:0; } .content { width:100%; margin:0 auto; } .content img { display: block; width:100%; max-width: 100%; } </style> </head> <body> <div class="content"> <img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"/> </div> </body>
設定srcset屬性後瀏覽器會根據我們的頁面不同，從當前的瀏覽環境進行感知，然後選擇一個圖片進行載入。當超過480時，載入的圖片變成了800，當超過800時，圖片變成了1600。但當我們把螢幕變小時，圖片始終是1600，是因為瀏覽器已經在大的解析度下載入了大的圖片，那麼會被預設放在快取中，使用大的圖片不再會有網路消耗，當然使用更大的圖片更好咯。
三，sizes
前面的第二種方法單獨使用的話會有一個坑，就是例如當img的寬度只佔50%，當我們加寬寬度的時候，加寬到480，但此時圖片的寬度只有240，圖片仍然變成了800。這時srcset屬性就還需要配合sizes屬性進行使用（第二種方法的sizes屬性值預設為100vw）。
<div class="content"> <img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="50vw"/> </div>
sizes屬性內還可以寫入媒體查詢，例如
<style>
html, * {
margin:0;
padding:0;
}
.content {
width:100%;
margin:0 auto;
}
.content img {
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<div class="content">
<img class="image" src="img/480.png"
srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
sizes="(min-width:800px) 800px, 100vm"/>
</div>就是當瀏覽器寬度小於800時，按照100vw來設定圖片；但超過800時，就是定寬了。
四，picture標籤
<div class="content">
<picture>
<source media="(max-width:36em)" srcset="img/tiananmen-s.jpg 768w"/>
<source srcset="img/tiananmen.jpg 1800w"/>
<img class="image" src="img/tiananmen.jpg"/>
</picture>
</div>瀏覽器會遍歷picture內的source設定，直到找到滿足當前環境的media，就將此source的srcset賦值給img屬性。當然它的具體用法自行百度去啦。
五，svg