css响应式图片: srcset+sizes,picture, svg

阅读数:78 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

响应式图片可以根据不同的设备屏幕大小从而选择加载不同的图片，从而节省带宽。实现响应式图片有三种方法：srcset+sizes属性、picture标签、svg

二、srcset+sizes

1、srcset

<img srcset="候选地址1 [限制条件：宽度/像素密度],[候选地址2 [限制条件2]],... />

srcset属性定义了img属性允许浏览器加载的图像集，他的值是一个用逗号进行分割的字符串，用来定义img标签在不同条件下需要加载的图片地址，如果srcset只填写一个候选图片地址，且不带条件，则其功能与以前的src属性一致。

（1）宽度限制条件

浏览器在下载图片前，它并不知道图片的尺寸，但是它知道它自身当前的视口宽度。因此，srcset允许我们通过指定浏览器视口的宽度，进行加载不同的图像。即指定在某个宽度下使用特定图片，需要加宽度限制条件，格式为：表示宽度的数字（单位为像素）+小写字母“w”（w可以理解为“width”的首字母），例如，如“800w”这样的宽度描述符，代表在像素密度未1时，渲染一个800像素宽的图像，另外需注意：指定的宽度必须为非零正数。

<img srcset="image/pic_300.jpg 300w,
                 image/pic_800.jpg 800w,
                 image/pic_1300.jpg 1300w"
    />

这种情况下，假设像素密度DPR为1时，在浏览器视窗≤ 300px时，会显示pic_300的图片，在浏览器视窗≥ 300 且 ≤ 800时，显示pic_800，视窗≥800且≤1300时，显示pic_1300，当视口≥ 1300px时，因为没有专门的条件，所以浏览器会选择最靠近1300px的条件，即，还是会显示pic_1300。

但是，如果设置了备用候选图片后，情况就有些不一样了。

<img srcset="image/pic_300.jpg 300w,
                 image/pic_800.jpg 800w,
                 image/pic_1300.jpg 1300w,
                 image/pic_default.jpg"
    />

这里有多设置一条pic_default，即在未命中其他条件时，显示pic_default的图片，此时的命中条件就变成等于关系，即当浏览器视窗分别等于300px、800px、1300px的条件下，才会命中，其余情况下均显示pic_default的图片。

（2）像素密度限制条件

设备像素，英文为：devicePixelRatio，缩写为：DPR=CSS像素 / 硬件像素。硬件像素，即视觉上的像素宽度。CSS像素，即在css中，占满一整行所需的px像素个数。

比如在手机的屏幕上，硬件像素（屏幕设备宽度）为375px，CSS像素（物理像素）为750px。则手机屏幕的像素密度DPR为：CSS像素 / 硬件像素 = 750 / 375=2。即在显示器上一个像素的宽度里，有2个CSS像素。DPR越大，屏幕越清晰。

像素密度限制即指定在什么样的DPR下应用什么样的图片，格式：像素密度dpr + 小写字母“x”，默认为1x。

以上几种限定条件可以混合使用（为多个图像指定相同的描述符，则只有第一个生效，后面的不生效）

2、sizes

sizes属性必须配合srcset属性一起使用才有效，单独使用无效。但是srcset可以单独使用。

sizes属性用来定义一组与srcset相匹配的媒体条件，指明当媒体条件为真时，什么样的图片尺寸是最佳选择。

sizes="媒体条件1 [槽的宽度1],[媒体条件2 [槽的宽度2]],..."

对于槽的宽度，可以使用像素或rem等长度单位，但是不可使用百分比。

<img src="selina.jpg" alt="alt"
      srcset="100-s1.jpg 100w,300-s1.jpg 300w,600-s2.jpg 600w,800-s2.jpg 800w"
      sizes="(max-width:500px) 300px,(max-width:1000px) 500px,100vw"/>

三、picture标签

picture元素是HTML5的新特性，它允许你放置多个source标签，指定不同的图像文件名，根据媒体条件（视口高度viewport height、宽度width、方向orientation）或像素密度来选择图片进行加载。

<picture>
      <source media="max-width:800px"

            srcset="image800.jpg 800w,
                    image1406.jpg 1406w
            "

            sizes="(min-width:530px) calc(100vw - 96px),
                   100vw"
       >

       <img alt="aaa"
          src="689.jpg"

          srcset="689.jpg 689w,
                  1378.jpg 1378w,
                  500.jpg 500w
                  1000.jpg 1000w"

         size="(min-width:1066px) 689px
                calc(75vw - 137px)"
       >
  </picture>

当符合source标签中的media条件时，选择source中的图片源，否则使用img中的图片源。

picture元素内部的source与img的关系像是相片与相框的关系，相框带有一个底图，当你有很多不同尺寸的图片时，你试图找到第一个合适尺寸的照片放到相框里，如果没有，就不放照片而用相框本身的底图，picture就是告诉你这个相框只能在这些图片里找合适的。

另外还支持选择不同格式的图片：

 <picture>
        <source type="image/webpp" srcset="snow.webp">
        <img src="snow.jpg" alt="a cat">
 </picture>

如果浏览器支持webp格式，则加载snow.webp，否则加载jpg图片。

四、svg

通过img标签插入svg矢量图也可以达到实现响应式图片的效果，但是这种方法不能用JavaScript来操作图像，而且只能使用内联css样式来控制图像，也不能使用css伪类。

或直接在HTML中插入svg代码，svg代码应该包含在<svg></svg>中。

最后可以通过iframe嵌入svg文档。

秒吧学习