php - 如何对齐不同大小的图像

Question

我正在尝试用不同尺寸的图像编写一个页面，但不知道如何正确对齐它们。 这是网页的样子: https://i.imgur.com/Li17CMl.jpg

我添加了 bootstrap img-fluid 以提高响应能力。如果我设置固定高度图像不会在较小的屏幕上正确缩小。

我用“...”清理了一些不相关的数据，只是为了让代码看起来更干净。 我当前的代码:

    foreach(row...) : ?>
    <div class="col-md-6" style="padding...">

      <div class="card">
        <div class="card-body" style="padding...">

          <a href="">
            <div>
              <img class="img-fluid" style="width: 100%;" src="row->image..." alt="">
            </div>
            <div>
              <h5> title </h1>
              <h6> date </h6>
            </div>
          </a>

        </div> <!-- /card body -->
      </div> <!-- /card -->

    </div> <!-- /col-6 -->
    <?php endforeach; ?>

我希望图像能在较小的屏幕上按比例缩小。

Answer 1

TL:DR object-fit: cover; 会成功的。

解决方案 1 - 固定高度

使用此解决方案，您必须为图像的高度设置值:照片不会拉伸(stretch)，但每个屏幕的比例会不同

.img-fluid {
   height: 200px; /* insert here your desired height*/
   object-fit:cover;
}

解决方案 2 - 真实流体

这个解决方案有点棘手，但照片将始终具有您选择的比例。

.card-body a div:first-child {
   position: relative;
   width: 100%;
   height: 0;
   padding-top: 60%; /*insert value for the desired ratio. ie: 60% -> 10/6 image*/ 
}

.img-fluid {
   position: absolute;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
   object-fit: cover;
}