如何使用HTML5图像元素处理响应式图像？

固定宽度、像素完美的网站设计早已不复存在。在当今宽屏显示器、互联网电视、各种尺寸的平板电脑和智能手机的世界中，我们的设计需要处理一切可能的情况，从320px到7680px❀。

随着这种多分辨率景观的出现，需要拉伸或缩小图像以满足这些不同的要求。这可以理解为下面的问题。如果矢量图形中发生偏移，则大多数具有固定像素的图像的宽度不会改变。

那我们该怎么办呢？

目前最常见的解决方案

作为一般规则，您可以在任何响应式网站上找到以下 CSS 样式：

img {
    max-width: 100%;
    height: auto;
}

此代码使用 max A 设置 -%–%： 10 确保图像永远不会超过其父容器的宽度。如果源容器的宽度缩小到小于图像的宽度，则图像也会相应缩小。设置 height:auto 可确保在这种情况下保留图像的纵横比。

这解决了问题的一个方面，并允许在许多不同的情况下显示相同的图像。然而，这不允许我们为不同的情况指定不同的图像。

新解决方案：

是HTML5中的新元素。

元件与当前的 和 元件配合使用时，极大地改进了响应式成像过程。这样您就可以放置多个source标签来指定不同的图像文件名，然后根据不同的条件加载它们。

它允许您根据以下条件加载完全不同的图像：

• 媒体属性的结果，例如：视口当前高度（viewport height）、宽度（width）、方向（direction）。
• 像素密度

这又意味着您可以：

• 上传适当大小的图像文件，以便充分利用可用带宽。
• 加载不同裁剪和纵横比的图像以适应不同的宽度布局变化。
• 加载更高的像素密度以显示更高分辨率的图像。

的工作原理

主要工作步骤如下：

• 创建标签。
• 在这些标签内，创建一个要用于执行任何功能的元素 。
• 添加media属性以包含您想要的属性，例如视口的当前高度（viewport height）、宽度（width等）。
• 添加属性srcset以匹配要加载的相应图像文件的名称。如果您想提供不同的像素密度（例如，针对 Retina 显示屏），您可以向 srcset 属性和
• 后备元素 添加其他文件名。

这是一个简单的基本示例，用于检查视口是否小于 768 像素，如果较小则加载较小的图像：

您可以注意到，属性使用与CSS 创建媒体属性。您可以使用相同的函数，这意味着您可以查询 max-width、min-width、