彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放，用于適應各種網格的尺寸。而實現方法是比較簡單，一句代碼就能搞定的事情。
img {max-width:100%;}

來看一個斷點解決圖片自適應的例子。

?

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

?

對應的CSS代碼：

?

@media (min-device-width:600px){
img[data-src-600px]{
? content: attr(data-src-600px,url);
? }
}
@media (min-device-width:800px){
? img[data-src-800px] {
? content:attr(data-src-800px,url);
? }
}

總結

以上是生活随笔為你收集整理的弹性图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。