如何使用 CSS background-image 或其他方式提供自适应全角图像？

Question

我的网站有全角主图。目前有一个 CSS 背景图片，其中有一张 URL 宽 2000 像素的图片。在小型设备上加载一张或多张这些图像绝对不是最佳选择。我想提供一张 2000 像素的图片、一张 1440 像素的图片、一张 992 像素的图片等，以缩短移动设备上的页面加载时间。

我似乎可以使用 -webkit-image-set 和 image-set，但它们仅采用 dpi 和 1x、2x 等尺寸，因此在这种情况下无济于事，据我了解因为这永远不会在较小的屏幕上显示较小的图像。或者，我可以使用媒体查询提供不同的图像，但如果你想根据视口提供图像并且设备是 2x 或 3x，那会很快变得复杂。或者我可以改用 img 标签并使用 srcset，但我一直无法找到一种解决方案来获得可上下缩放并填充固定高度的全宽图像。 object-fit: cover 似乎应该可以做到这一点，但我尝试过的最大宽度、高度、最大高度等的组合都没有奏效。

下面是我尝试自适应的 CSS 背景图片示例：

.hero {
display: block;
min-height: 80px;
width: 100%;
float: left;
position: relative;
padding: 0;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
background-image: url("https://place-hold.it/500x100");
}

<div style="width: 500px;"> <!-- for this example, is 100% on our page -->
<a class="hero"></a>
</div>

这是在带有 Boostrap 的 Wordpress 上。

Answer 1

以下是使用图片标签的方法。我喜欢使用这个标签，因为我认为它可以让您更好地控制断点。

在此处查找： https://www.w3schools.com/tags/tag_picture.asp

/* Basic styling for body. not important */

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}


/* The parent container needs to have position:relative */

.example-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}


/* The content element needs position:relative, and z-index higher than the BG element */

.example-content {
  position: relative;
  z-index: 10;
  margin: 0;
}


/* The picture element */

.image-full,
.image-full img {
  display: block;
  
  /* Absolute position the element with full width/height, and a low z-index */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  
  /* Object-fit:cover will make the image fill the space */
  object-fit: cover;
  object-position: center;
}

<div class="example-container">
  <h2 class="example-content">Content goes here</h2>
  <picture class="image-full">
    <source media="(min-width:1200px)" srcset="https://i.picsum.photos/id/1002/4312/2868.jpg?hmac=5LlLE-NY9oMnmIQp7ms6IfdvSUQOzP_O3DPMWmyNxwo">
    <source media="(min-width:500px)" srcset="https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
    <img src="https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w">
  </picture>
</div>

如何使用 CSS background-image 或其他方式提供自适应全角图像？

How to provide adaptive full-width images with CSS background-image — or otherwise?

html

css

srcset

imageset