Img-fluid class 不在移动尺寸 Bootstrap 上显示图像

Question

我有这段代码，我使用 bootstrap 负责。全屏图像工作正常，但当我将宽度更改为移动时，照片消失了。

<Fragment>
        <header className="jumbotron jumbotron-openness">
          <h1>{personalities.openness.title}</h1>
        </header>
        <div className="personality__body">
          <section className="personality__description">
            {personalities.openness.descr}
          </section>
          <div className="row">
            <div className="col-sm-6">
              <span>
                <img className="img-fluid" src={openness4} />
              </span>
            </div>
            <div className="col-sm-6">
              <p className="personality__description">
                {personalities.openness.descr}
              </p>
            </div>
          </div>
          <section className="personality__description">
            {personalities.openness.descr}
          </section>
          <div className="row">
            <div className="col-sm-6">
              <img className="img-fluid" src={openness3} />
            </div>
            <div className="col-sm-6">
              <img className="img-fluid" src={openness5} />
            </div>
          </div>
        </div>
      </Fragment>

已经尝试过 img-responsive 但没有成功。

我的 css 代码，我只有 css 第一个超大屏幕图像：

.jumbotron-openness {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  justify-content: center;
  display: flex;
  height: 400px;
  align-items: center;
  background-image: url("../../images/openness.jpeg");
  background-position: 0px -550px;
}
.jumbotron-openness h1 {
  font-size: 70px;
  color: white;
}
.personality__description {
  font-size: 20px;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  text-align: justify;
  padding: 2rem 0;
}
.personality__body {
  margin: 0 3rem;
}

我的问题照片：

我的问题视频： https://vimeo.com/600060275/60d835adc6

Answer 1

通过改变 jumbotron-openness 的样式解决 class:

.jumbotron-openness {
  background-repeat: no-repeat;
  justify-content: center;
  display: flex;
  height: 400px;
  align-items: center;
  background-image: url("../../images/openness.jpeg");
  background-position: -100px -600px;
}

Answer 2

img-fluid 仅此而已:

.img-fluid{
    
    max-width:100%;
    height:auto;

 }

Img-fluid class 不在移动尺寸 Bootstrap 上显示图像

Img-fluid class not displaying images on mobile size Bootstrap

html

css

reactjs

responsive