都1202年了，还在使用JS做图片响应式么？

一、前言

在 web 开发中，经常需要根据用户手机屏幕不同的宽高比/尺寸，对图片元素进行缩放，以提高用户体验，可有些图片必须得保证完整性，不能拉伸或裁剪，这就需要开发针对不同的屏幕尺寸使用不同的图片素材。

放在曾经，一定是使用js来做，可如今，<picture> 元素带来了原生的能力以解决诸类问题......

下面有请 <picture>：

二、介绍

<picture> 元素是 block 元素，可拥有 0 个或者多个 <source> 子元素和一个 <img> 子元素，如果没有 <img> 元素，则图片不会显示。

<source> 是 inline 元素，其本身不包含样式也不应该设置样式。拥有 srcset 和 media 属性，rcset 用于指定图片资源。media 属性用于设置多媒体查询，符合媒体查询的图片 source 将会替换为 <img> 的src并展示。

所以，media 属性可以帮助我们跳过 JS 直接完成图片响应式加载。

三、实战

针对不同的宽高比设置不同的source:

图片的的宽高应该设置在 <img> 上

<picture>
    <source media="(min-aspect-ratio: 375/667)" srcSet="https://gw.alicdn.com/imgextra/i3/O1CN01hPKi8523CLuEqCID9_!!6000000007219-2-tps-340-246.png">
    <img class='image' src="https://gw.alicdn.com/imgextra/i2/O1CN01vXeME91qv9cfeheHo_!!6000000005557-2-tps-340-300.png">
</picture>

兼容性

除IE外都支持

不兼容的浏览器将会直接采用子元素<img>设置的图片。