html - 使图像和填充响应 Bootstrap

Question

谁能帮我制作我的图像和它周围的填充 react 灵敏？我尝试制作填充 % 而不是 px 并将 img-fluid 类添加到我的图像中。它在一定程度上起作用，但如果我将窗口设置得太宽，我的图像就会偏离中心:

如果屏幕不是那么宽，图像工作正常:

HTML:

  <div class="Aligner">
      <div class="Aligner-item">

  <div>
      <div class="card authenticationRequest" style="">
        <div class="card-header-img">
          <img class="card-img-top mainImage img-fluid" src="https://i.pinimg.com/736x/bc/be/e6/bcbee6931f71db0d1629355bd61fe8cd--wolves-mans.jpg" alt="Smiley face" height="42" width="42">
        </div>
        <div class="card-block">
          <p>Hi</p>
          <p>Hello</p>
          <p>Its</p>
          <p>Me</p>
        </div>
      </div>
    </div>
    </div>
  </div>

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2%;
}

.Aligner-item {
  width: 50%;
}

.mainImage {
  height: 400px;
  width: 300px;
}

.card-header-img {
  background-color: #cf0000;
  /* padding: 40px 20px 40px 20px; */
  padding: 10% 10% 10% 10%
}

有人可以帮忙吗？这是我的 jsfiddle:

https://jsfiddle.net/DTcHh/38370/

提前致谢!!!

Answer 1

添加边距:0px 自动；

.card-header-img {
  background-color: #cf0000;
  padding: 10% 10% 10% 10%;
  margin: 0px auto;
}

有效