Img-fluid类在移动设备大小的Bootstrap上不显示图像

我在使用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响应,但不起作用。

我的css代码,我只有第一个jumbotron图像的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

转载请注明出处:http://www.tianshuzhineng.com/article/20230526/1238528.html