html/css：使用 image-set 将纵向或横向图像作为 div 的背景图像

Question

我正在尝试 bootstrap 4 旋转木马根据设备方向使用横向或纵向图像作为项目的背景...

以下简化代码以某种方式工作（头部有一些风格）但我找不到关于 image-set 的信息所以我不知道如何用 1x 和 2x 代替 landscape 和 portrait（或者如果可以的话）：

<div class="container">
  <div class="outer">
    <div class="inner"
         style="background-image: url('landscape.jpg');
                background-image: -webkit-image-set(
                  url('landscape.jpg') 1x,
                  url('portrait.jpg') 2x);
                background-image: -image-set(
                  url('landscape.jpg') 1x,
                  url('portrait.jpg') 2x)">
      test
    </div>
  </div>
</div>

有没有人得到这样的东西，或者有人有更好的方法？

Answer 1

我认为，您使用 image-set 的方式是错误的。更准确地说，image-set 用于指定同一图片的一些不同质量的图像。

作为解决方案，我建议您使用 background-size:cover 或类似的东西。

Answer 2

image-set() function 不支持根据任何媒体条件更改图像。它只支持分辨率和图像类型参数。

另一种方法是使用常规媒体查询来根据 device orientation media feature.

更改元素的背景图像

另一种选择是使用 <picture> element, through which you could specify different media conditions for different images via the media attribute。

html/css：使用 image-set 将纵向或横向图像作为 div 的背景图像

html/css: use image-set to have a portrait or landscape image as background-image for a div

html

css

background-image

imageset