目录
  • 🌟前言
  • 🌟目前最常见的解决方案
  • 🌟新的解决方案`<picture>`
  • 🌟`<picture>`的工作原理
  • 🌟`<picture>` 兼容性解决方案
  • 🌟写在最后


🌟前言

哈喽小伙伴们，前端开发过程中经常会遇到一些图片的处理，比如在多端展示图片的时候需要自适应显示，也就是前端不同的屏幕大小请不同的图片尺寸显示；所以，我们应该怎么做呢?一起来看下吧。

🌟目前最常见的解决方案

作为一般规则，你会在任何响应式网站中发现以下CSS样式:

img {
    max-width: 100%;
    height: auto;
}
  • 1.
  • 2.
  • 3.
  • 4.

此代码使用 max-width:100% 的设置，以确保图像永远不会超越其父容器的宽度。如果父容器的宽度收缩小于图像的宽度，图像将随之缩小。 height:auto 的设置可以确保当有这种情况发生时，图像将以自身的宽高比保留。

🌟新的解决方案<picture>

<picture> 是HTML5一个新的元素。它允许你放置多个 source 标签，以指定不同的图像文件名，进而根据不同的条件进行加载。

它可以让你根据以下条件加载完全不同的图像：

  • 媒体特性结果如：视口的当前高度(viewport height)，宽度(width)，方向(orientation)。
  • 像素密度

反过来这也意味着您可以：

  • 加载适当大小图像的文件，使可用带宽得到充分利用。
  • 加载不同裁剪并具有不同纵横比的图像，以适合于不同宽度的布局变化。
  • 加载更高的像素密度，显示更高分辨率的图像。

前端【响应式图片处理】之 【picture标签】_文件名

🌟<picture>的工作原理

基本工作步骤如下：

  1. 创建 <picture></picture> 标签。
  2. 在这些标签内创建一个你想用来执行任何一个特性的 <source> 元素。
  3. 添加一个 media 属性，用来包含你想要的特性，如视口的当前高度(viewport height)，宽度( width )，方向(orientation)等。
  4. 添加一个 srcset 属性与相应的图像文件名相匹配，进行加载。如果你想提供不同的像素密度，例如Retina显示屏，你可以添加额外的文件名到你的 srcset 属性中。
  5. 添加一个回退<img>元素。

这里有一个简单的基本的例子，用来检查视口是否小于 768px ，如果小于的话就加载一个较小的图像：

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

你可能会注意到，在 media 属性使用的语法与创建CSS媒体特性中使用的语法一样。您可以使用相同的特性，这意味着你可以查询 max-width ， min-width ， max-height ， min-height ， orientation 等属性。

同时，您也可以使用这些特性判断设备的方向，从而加载横向或纵向版本的图像，同时您也可以进行大小特性的混合。例如：

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

上面的代码实现了可以在一个小的景观设备上加载小的，景观裁剪图像的版本。在大的景观设备上加载大的相同的图像版本。

这样，在小尺寸的小型设备上，或在大尺寸的大型设备上，该设备可以自主进行图像主导从而加载不同图像剪裁的版本。

如果您想为更高密度的显示器提供不同分辨率的图像版本，可以通过在 srcset 属性中添加额外的文件名来实现。例如，让我们来看看屏幕像素密度为 2x 的Retina 代码处理片断：

<picture>
    <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
    <source srcset="default.jpg, default_retina.jpg 2x">
    <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

🌟<picture> 兼容性解决方案

如果你现在就想使用<picture> 元素需要通过引入polyfill来解决兼容性问题。

你也可以使用 Picturefill2.0 这个polyfill。

<script src="picturefill.min.js"></a>
  • 1.

IE9
Picturefill在其他的IE版本都可以正常工作，但是IE9却不能识别被包裹在 picture 标签中的 source 元素。为了解决这个问题，在 video 标签内包住你的源元素，这就会使他们在IE9中被识别，例如：

<picture>
    <!--[if IE 9]><video ><![endif]-->
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="default.jpg" alt="My default image">
</picture>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

🌟写在最后

更多前端知识请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！