以兼容IE的全宽响应图像为目标：2种方法

2023-09-16 05:56:15

在不久的过去，当jQuery是山中的之王，而CSS3仍值得被指定为山中的之王时，最流行的响应式背景图像工具是Backstretch jQuery插件。在以下属性得到更多支持之前（也就是说，IE<9的市场份额总体上低于20%），Backstretch是一个非常棒的工具。

现在，使用纯CSS来实现响应式图像的能力得到了很好的支持。让我们看看如何操作。

方法 1：使用CSS媒体查询

媒体查询是CSS中最强大的工具之一，它们允许我们根据屏幕的大小和方向来改变样式。我们可以使用媒体查询来创建一组针对不同设备的样式，这样图像就会在所有设备上看起来都很好。

首先，我们需要创建一个CSS媒体查询，它将应用于小于特定宽度的小屏幕设备。例如，我们可以创建一个媒体查询，它针对宽度小于768像素的设备。

@media (max-width: 768px) {
  /* 针对小屏幕设备的样式 */
}

接下来，我们需要在我们的CSS文件中为图像添加样式。我们可以使用background-image属性来设置图像，以及background-size属性来控制图像的大小。

body {
  background-image: url("image.jpg");
  background-size: cover;
}

@media (max-width: 768px) {
  body {
    background-image: url("image-small.jpg");
    background-size: contain;
  }
}

现在，当有人访问我们的网站时，他们将看到一幅适合其屏幕尺寸的图像。在较大的屏幕上，他们将看到大图像，而在较小的屏幕上，他们将看到较小的图像。

方法 2：使用HTML5的picture元素

picture元素是HTML5中引入的一个新元素，它允许我们为图像指定多个源。然后，浏览器将选择最适合当前设备的源。

为了使用picture元素，我们需要首先在我们的HTML文件中创建一个picture元素。然后，我们需要在picture元素中添加一个或多个source元素，每个source元素都指定了一个图像源。

<picture>
  <source srcset="image.jpg" media="(min-width: 768px)">
  <source srcset="image-small.jpg" media="(max-width: 768px)">
  <img src="image.jpg" alt="Image">
</picture>

现在，当有人访问我们的网站时，浏览器将选择最适合其设备的图像源。在较大的屏幕上，浏览器将选择大图像源，而在较小的屏幕上，浏览器将选择较小的图像源。