弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放,用于适应各种网格的尺寸。而实现方法是比较简单,一句代码就能搞定的事情。
img {max-100%;}
来看一个断点解决图片自适应的例子。
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
对应的CSS代码:
@media (min-device-600px){
img[data-src-600px]{
content: attr(data-src-600px,url);
}
}
@media (min-device-800px){
img[data-src-800px] {
content:attr(data-src-800px,url);
}
}