响应式图片

最早接触bootstrap框架里面对图片的响应式处理是这样做的:

1. 给所有的图片一个img-responsive类
2. 而这个类里面的利用css属性来做到响应式

一. 利用类名响应式图片

<img src="test.png" class="img-responsive" alt="">

响应式类的具体做法:

.img-responsive {
    display: inline-block;
    height: auto;
    max-width: 100%;
 }

这样就可以做到图片的响应式.但是它还是有很多的不好.

二 利用媒体查询做响应式图片

在介绍这个之前,我们先介绍一个概念:响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)

-webkit-min-device-pixel-ratio: 2
是指当时显示屏最小的色倍为2倍的

-webkit-min-device-pixel-ratio: 3
是指当时显示屏最小的色倍为3倍的

无视网膜设备devicePixelRatio值为1，视网膜设备为2

我们的需求是:

我们主要通过：通过判断 devicePixelRatio 的值来加载不同尺寸的图片

1. 针对普通显示屏(devicePixelRatio = 1.0、1.3、 1.5、2.0)，加载一张 2 倍的图片

2. 针对高清显示屏(devicePixelRatio >= 3.0)，加载一张 3倍大的图片

这里可以通过查询其他的设备的像素比：http://screensiz.es/phone

首先我们利用媒体查询做到在不同屏幕加载不同图片的目的:

<div class="img-response"></div>

/* 这里加载2倍图 */
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
     .img-response {
          width: 500px;
          height: 300px;
        background-image: url("./test@2x.png");
      }
    }
/*这里记载3倍图*/
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
      .img-response {
          width: 500px;
          height: 300px;
        background-image: url("./test@3x.png");
      }
    }

上面的代码就会实现不同屏幕加载不同的图片,但是上面肯定不适应与多个图片,这只是一个例子,用来说明原理.具体的做法是:

@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    background-image: url($url + "@3x.png")
  }
}

上面试scss语言,做到了多个图片按屏幕的设备像素密度来实现分开加载.在html中的操作是:

.img-response {
   width: 300px;
   height: 150px;
   @include bg-image('test');   //其中的test是图片的名字
   background-size: 300px 150px;
   background-repeat: no-repeat;
 }

这样就做到了,响应式图片的原理.具体代码:

<!-- 测试图片 -->
 <div>
   <div class="img-response"></div>
 </div>

<style lang="scss">
  @mixin bg-image($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
      background-image: url($url + "@3x.png")
    }
  }

  .img-response {
    width: 300px;
    height: 150px;
    @include bg-image('test');  
    background-size: 300px 150px;
    background-repeat: no-repeat;
  }
</style>

三 pictrue标签实现

HTML5 的 元素可以设置多张图片。

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

srcset 属性的必须的，定义了图片资源。

media 属性是可选的，可以在媒体查询的 CSS @media 规则 查看详情。

对于不支持 picture 元素的浏览器你也可以定义 img 元素来替代

四 background属性与图片自适应的知识点

1. 如果 background-size 属性设置为 “contain”, 背景图片将按比例自适应内容区域。图片保持其比例不变：

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}

2. 如果 background-size 属性设置为 “100% 100%” ，背景图片将延展覆盖整个区域：

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

3. 如果 background-size 属性设置为 “cover”，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}