Question

我使用图像wrapper使我的引导网格中的所有图像都具有相同的高度，然后通过让它们的宽度独立缩放来保留它们的原始宽高比（参见下面的代码片段）。现在我想在它们的div中水平居中，以使布局更整洁。我尝试使用下面的image-container课程，但它并没有在我应用它的各种div中工作（目前只是让它们消失）。是否有某种方法可以使用包装器属性水平居中图像？我很感激任何有用的推动。谢谢！

我正在寻找成功的方式：

保持图像响应缩放到不同宽高比的相同高度（如下面的代码段所示）
水平居中图像，同时保留其响应缩放（上述点）

请参阅下面的代码段，了解图像如何响应缩放到相同的高度;注释掉的image-container div是我在缩放后水平居中图像的尝试失败之一。

＆＃13;

    .thumbnail img{
      max-width: 100%; /* do not stretch the bootstrap column */
    }

    .img-wrapper {
      position: relative;
      padding-bottom: 130%;
      overflow: hidden;
      width: 100%;
    }

    .img-wrapper img {
      position: absolute;
      top:0;
      left:0;
      width:auto;
      height:100%;
    }

    .image-container {
      display: flex;
      justify-content: center;
    }

＆＃13;

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <div class="row">
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <!--<div class="image-container">-->
          <div class="thumbnail">
            <div class="img-wrapper">
              <img src="http://via.placeholder.com/150x300"/>
            </div>
          </div>
        <!--</div>-->
      </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
      <!--<div class="image-container">-->
        <div class="thumbnail">
          <div class="img-wrapper">
            <img src="http://via.placeholder.com/200x350"/>
          </div>
        </div>
      <!--</div>-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
      <!--<div class="image-container">-->
        <div class="thumbnail">
          <div class="img-wrapper">
            <img src="http://via.placeholder.com/150x300"/>
          </div>
        </div>
      <!--</div>-->
    </div>
  </div>

＆＃13;

Answer 1

display: flex与justify-content: center结合使用确实将图片置于中心位置;问题是你在flex中有 absolute positioning ：

.img-wrapper img {
  position: absolute;
}

只需删除上述代码即可使图像居中。请注意，您可能还想删除top和left，因为删除position: absolute后这些内容无效：

＆＃13;

.thumbnail img {
  max-width: 100%;
  /* do not stretch the bootstrap column */
}

.img-wrapper {
  position: relative;
  padding-bottom: 130%;
  overflow: hidden;
  width: 100%;
}

.img-wrapper img {
  /* position: absolute;
  top: 0;
  left: 0; */
  width: auto;
  height: 100%;
}

.image-container {
  display: flex;
  justify-content: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <div class="image-container">
      <div class="thumbnail">
        <div class="img-wrapper">
          <img src="http://placehold.it/150x300" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <div class="image-container">
      <div class="thumbnail">
        <div class="img-wrapper">
          <img src="http://placehold.it/200x350" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <div class="image-container">
      <div class="thumbnail">
        <div class="img-wrapper">
          <img src="http://placehold.it/150x300" />
        </div>
      </div>
    </div>
  </div>

＆＃13;

希望这有帮助！：）

将缩放到相同高度的响应式图像居中

1 个答案: