弹性图片

弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放,用于适应各种网格的尺寸。而实现方法是比较简单,一句代码就能搞定的事情。
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);
  }
}

原文地址:https://www.cnblogs.com/yangguoe/p/8481802.html