目录
- 🌟前言
- 🌟目前最常见的解决方案
- 🌟新的解决方案`<picture>`
- 🌟`<picture>`的工作原理
- 🌟`<picture>` 兼容性解决方案
- 🌟写在最后
🌟前言
哈喽小伙伴们,前端开发过程中经常会遇到一些图片的处理,比如在多端展示图片的时候需要自适应显示,也就是前端不同的屏幕大小请不同的图片尺寸显示;所以,我们应该怎么做呢?一起来看下吧。
🌟目前最常见的解决方案
作为一般规则,你会在任何响应式网站中发现以下CSS样式:
此代码使用 max-width:100% 的设置,以确保图像永远不会超越其父容器的宽度。如果父容器的宽度收缩小于图像的宽度,图像将随之缩小。 height:auto 的设置可以确保当有这种情况发生时,图像将以自身的宽高比保留。
🌟新的解决方案<picture>
<picture>
是HTML5一个新的元素。它允许你放置多个 source 标签,以指定不同的图像文件名,进而根据不同的条件进行加载。
它可以让你根据以下条件加载完全不同的图像:
- 媒体特性结果如:视口的当前高度(viewport height),宽度(width),方向(orientation)。
- 像素密度
反过来这也意味着您可以:
- 加载适当大小图像的文件,使可用带宽得到充分利用。
- 加载不同裁剪并具有不同纵横比的图像,以适合于不同宽度的布局变化。
- 加载更高的像素密度,显示更高分辨率的图像。
🌟<picture>
的工作原理
基本工作步骤如下:
- 创建
<picture></picture>
标签。 - 在这些标签内创建一个你想用来执行任何一个特性的
<source>
元素。 - 添加一个
media
属性,用来包含你想要的特性,如视口的当前高度(viewport height),宽度( width ),方向(orientation)等。 - 添加一个
srcset
属性与相应的图像文件名相匹配,进行加载。如果你想提供不同的像素密度,例如Retina显示屏,你可以添加额外的文件名到你的srcset
属性中。 - 添加一个回退
<img>
元素。
这里有一个简单的基本的例子,用来检查视口是否小于 768px ,如果小于的话就加载一个较小的图像:
你可能会注意到,在 media 属性使用的语法与创建CSS媒体特性中使用的语法一样。您可以使用相同的特性,这意味着你可以查询 max-width , min-width , max-height , min-height , orientation 等属性。
同时,您也可以使用这些特性判断设备的方向,从而加载横向或纵向版本的图像,同时您也可以进行大小特性的混合。例如:
上面的代码实现了可以在一个小的景观设备上加载小的,景观裁剪图像的版本。在大的景观设备上加载大的相同的图像版本。
这样,在小尺寸的小型设备上,或在大尺寸的大型设备上,该设备可以自主进行图像主导从而加载不同图像剪裁的版本。
如果您想为更高密度的显示器提供不同分辨率的图像版本,可以通过在 srcset 属性中添加额外的文件名来实现。例如,让我们来看看屏幕像素密度为 2x 的Retina 代码处理片断:
🌟<picture>
兼容性解决方案
如果你现在就想使用<picture>
元素需要通过引入polyfill来解决兼容性问题。
你也可以使用 Picturefill2.0 这个polyfill。
IE9
Picturefill在其他的IE版本都可以正常工作,但是IE9却不能识别被包裹在 picture 标签中的 source 元素。为了解决这个问题,在 video 标签内包住你的源元素,这就会使他们在IE9中被识别,例如:
🌟写在最后
更多前端知识请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!
✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!