html - 制作两列相同大小的响应图像

Question

我有不同大小的图像，但想让它们在页面上的宽度和高度看起来相等。我做了什么:

HTML

<div class="col-lg-6">
  <img src = "assets/img/101.jpg" alt="Null" />
</div>

CSS

#images img {
  width: 100%;
  padding-bottom: 4em;
  position: center;
}

但他们看起来像这样:

他们有不同的高度。如何使其相等？可能我需要在不改变宽度的情况下按高度和中心裁剪它们。可能吗？

来自评论的解释

我建议裁剪它们而不是调整大小可能会更好。居中并裁剪成较小的尺寸。

Answer 1

要更好地控制图像，最好切换到背景图像。然后，您可以使用 background-size: cover 来填充 div。

HTML

<div class="col-lg-6">
  <div class="image-holder" style="background-image: url('assets/img/101.jpg');">
    &nbsp;
  </div>
</div>
<div class="col-lg-6">
  <div class="image-holder" style="background-image: url('assets/img/101.jpg');">
    &nbsp;
  </div>
</div>

CSS

.image-holder {
  background-size: cover;
  background-position: center center;
  height: 400px;
  width: 100%;
}

如果您的图像只是静态 Assets ，最好在 css 中包含图像引用。