Bootstrap 5 - 为不同的断点显示不同的响应图像

Question

我正在使用 bootstrap 5. 我想使用 img 标签为 mobile/tablet/desktop 显示不同的图像。我正在尝试使用此代码，但无法使用 bootstrap 框架的 display 实用程序正确设置包装器 div 的断点。

如果可能的话，我想要三个图像标签而不是三个不同的 div，它们占据 window 高度的 100%。

如果您看到代码，我有一种模态显示在背景图像的顶部，需要适合每个断点所有屏幕 space 可用。我试过 img-fluid w-100 h-100 类但结果不是很好而且我无法裁剪背景。我是用vue做前端，我不是前端开发

谢谢。

<template>
  <div class="container-fluid p-0">
    <div class="row m-0">
<!-- This div with the image needs to be displayed only on mobile sm breakpoint -->
      <div class="col-lg-12 d-md-none d-lg-none d-sm-block p-0">
        <img class="img-fluid w-100" src="@/assets/sm-background.png">   
      </div>
<!-- This div with the image needs to be displayed only on tablet md breakpoint -->
      <div class="col-lg-12 d-none d-sm-none d-lg-none d-md-block p-0">
        <img class="img-fluid w-100" src="@/assets/md-background.png">   
      </div>
<!-- This div with the image needs to be displayed only on desktop lg breakpoint -->
      <div class="col-lg-12 d-none d-sm-none d-md-none d-lg-block p-0">
        <img class="img-fluid w-100" src="@/assets/lg-background.png">   
      </div>

      <div class="col-sm-12 col-md-6 col-lg-6 mx-auto position-absolute" id="checkModal">
        <div class="card">
          <div class="card-body">
            <h4>Age verification required</h4>
            <p>...</p>
            
            <input type="date" class="form-control" v-model="birthDate" >
            
            <input type="passwrd" class="form-control" v-model="passwor" >

            <button class="btn btn-primary" @click.prevent="unlockContent()">Conferma</button>

          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      birthDate: '',
      password: ''
    }
  },
  mounted() {

  },
  methods: {
    unlockContent() {
      console.log(this.birthDate, this.password);
    }
  }
}
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
#checkModal {
  top: 14%;
  left: 0;
  right: 0;
  z-index: 1;
}
</style>

´``

Answer 1

_{注意：第 1 部分回答了原始问题（d-* 用法）但 not recommended for images 作为浏览器可能会预加载隐藏图像。但是，d-*类对于断点显示其他元素还是很有用的。}

1。 `d-*`类

Bootstrap类都是mobile first，所以我们不需要定义每一个断点。无论我们在较小的断点处定义什么，都会级联到较大的断点，直到被覆盖。

所以假设 OP 的设备定义，我们可以使用这些 display 类:

DEVICE	SCREEN SIZE	CLASSES
mobile	visible below `md`	`d-md-none`
tablet	visible only on `md`	`d-none d-md-block d-lg-none`
desktop	hidden below `lg`	`d-none d-lg-block`

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- visible below md -->
<img class="d-md-none img-fluid w-100" alt="mobile alt text" src="https://via.placeholder.com/600x50/8da0cb/000000?text=600x50+for+breakpoint+%3C=+sm">
<!-- visible only on md -->
<img class="d-none d-md-block d-lg-none img-fluid w-100" alt="tablet alt text" src="https://via.placeholder.com/900x75/fc8d62/000000?text=900x75+for+breakpoint+==+md">
<!-- hidden below lg -->
<img class="d-none d-lg-block img-fluid w-100" alt="desktop alt text" src="https://via.placeholder.com/1200x100/66c2a5/000000?text=1200x100+for+breakpoint+%3E=+lg">

hiding elements 的扩展速查表：

SCREEN SIZE            CLASSES
---------------------------------------------------
hidden on all          d-none
hidden only on xs      d-none d-sm-block
hidden only on sm      d-sm-none d-md-block
hidden only on md      d-md-none d-lg-block
hidden only on lg      d-lg-none d-xl-block
hidden only on xl      d-xl-none d-xxl-block
hidden only on xxl     d-xxl-none
hidden below sm        d-none d-sm-block
hidden below md        d-none d-md-block
hidden below lg        d-none d-lg-block
hidden below xl        d-none d-xl-block
hidden below xxl       d-none d-xxl-block
---------------------------------------------------
visible on all         d-block
visible only on xs     d-block d-sm-none
visible only on sm     d-none d-sm-block d-md-none
visible only on md     d-none d-md-block d-lg-none
visible only on lg     d-none d-lg-block d-xl-none
visible only on xl     d-none d-xl-block d-xxl-none
visible only on xxl    d-none d-xxl-block
visible below sm       d-sm-none
visible below md       d-md-none
visible below lg       d-lg-none
visible below xl       d-xl-none
visible below xxl      d-xxl-none

2。 `<picture>` 元素（推荐用于图像）

预加载隐藏图像的浏览器行为不一致over time and across browsers. Since loading hidden images hurts page load times, it's recommended to avoid the d-none approach for images。

断点图像的最佳实践（又名“art direction”）：

使用 <picture> with multiple <source> tags conditioned on media 个字符串。
因为 css 类在 media strings, use bootstrap's breakpoint pixels 中不起作用：

BREAKPOINT DIMENSIONS

sm ≥576px

md ≥768px

lg ≥992px

xl ≥1200px

xxl ≥1400px

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<picture>
  <!-- show this up to sm -->
  <source media="(max-width: 596px)" srcset="https://via.placeholder.com/600x50/8da0cb/000000?text=600x50+for+breakpoint+%3C=+sm">
  <!-- else show this up to md -->
  <source media="(max-width: 768px)" srcset="https://via.placeholder.com/900x75/fc8d62/000000?text=900x75+for+breakpoint+==+md">
  <!-- else show this -->
  <img class="img-fluid w-100" alt="alt text for all sources" src="https://via.placeholder.com/1200x100/66c2a5/000000?text=1200x100+for+breakpoint+%3E=+lg">
</picture>

Bootstrap 5 - 为不同的断点显示不同的响应图像

Bootstrap 5 - display different responsive images for different breakpoint

html

css

twitter-bootstrap

bootstrap-5

1。 `d-*`类

2。 `<picture>` 元素（推荐用于图像）

BREAKPOINT	DIMENSIONS
`sm`	≥576px
`md`	≥768px
`lg`	≥992px
`xl`	≥1200px
`xxl`	≥1400px

Bootstrap 5 - 为不同的断点显示不同的响应图像

Bootstrap 5 - display different responsive images for different breakpoint

html

css

twitter-bootstrap

bootstrap-5

1。 d-*类

2。 <picture> 元素（推荐用于图像）

1。 `d-*`类

2。 `<picture>` 元素（推荐用于图像）