阅读 750
都1202年了,还再使用JS做图片响应式么?

都1202年了,还再使用JS做图片响应式么?

一、前言

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

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

下面有请 <picture>

二、介绍

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

<source>inline 元素,其本身不包含样式也不应该设置样式。拥有 srcsetmedia 属性,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>
复制代码

image.png

兼容性

除IE外都支持

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

文章分类
前端
文章标签