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

來看一個斷點解決圖片自適應(yīng)的例子。

?

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

?

對應(yīng)的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);
? }
}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。