Question

我有来自其他网站的图片/缩略图，我将它们放在a col-md-2课程div中。问题在于图像缩略图在宽度和/或高度上具有不同的尺寸，并且由于它们具有不同的尺寸，因此它们不会水平对齐。我应该如何接近它以使它们水平对齐并且每个图像块具有相同的高度？

<div class="gallery-patagonia-content">
    <div class="container">
        <div class="row">
            <?php foreach ( $images as $image ) { ?>
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                <a data-toggle="tooltip" data-placement="top" title="<?= $image>title; ?>" href="<?= $image>image; ?>"><img class="img-responsive" alt="<?= $image>title; ?>" src="<?= $image>thumbS; ?>"/></a>
                <p><?= $image>copyright; ?></p>
            </div>
            <?php } ?>
        </div>
    </div>
</div>

Answer 1

您可以将图像设置为背景样式，以便根据需要设置宽度和高度

.image {
  display: block;
  height: 100px;
  width: 500px;
  background: url(https://pixabay.com/static/uploads/photo/2016/01/12/19/16/painting-1136443_960_720.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  margin: 10px;
  }
.v2 { 
  height: 200px;
  width: 200px;
  }
.v3 { 
  height: 300px;
  width: 150px;
  }

<div class="image"></div>
<div class="image v2"></div>
<div class="image v3"></div>

具有不同尺寸图像的对象高度

1 个答案: