css CSS中的响应式图像

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css CSS中的响应式图像相关的知识，希望对你有一定的参考价值。

// based on article by CHRIS COYIER https://css-tricks.com/responsive-images-cs
.img {
  background-image: url(small.jpg);
  background-image: 
    -webkit-image-set(
      "small.jpg" 1x,
      "medium.jpg" 2x,
    );
  background-image: 
    image-set(
      "small.jpg" 1x,
      "medium.jpg" 2x,
    );
}
@media
  (min-width: 800px) {
  .img {
    background-image: url(large.jpg);
    background-image: 
      -webkit-image-set(
        "large.jpg" 1x,
        "extralarge.jpg" 2x,
      );
    background-image: 
      image-set(
        "large.jpg" 1x,
        "extralarge.jpg" 2x,
      );
  }
}

以上是关于css CSS中的响应式图像的主要内容，如果未能解决你的问题，请参考以下文章