时间戳

首页 > 解决方案 > Img-fluid 类未在移动设备大小的 Bootstrap 上显示图像

html - Img-fluid 类未在移动设备大小的 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 代码，我只有第一个 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

标签： htmlcssreactjsresponsive

解决方案

解决了不断变化的 jumbotron-openness 类的风格：

.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;
}

推荐阅读