img {max-width:100%;}
来看一个断点解决图片自适应的例子。
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
对应的CSS代码:
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);
}
}