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

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%;
}

如果您的图片只是静态资产，最好在 css 中包含图片参考。

Answer 2

您不能同时为一张图片设置高度和宽度 - 它会把它们拉长。已根据要求将其与 col-lg-6 一起设为 2 列弹性框。

参见下面的演示：

.box {
  border: 1px solid #ddd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 50%;
  min-width: 200px; 
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.col-lg-6.box {
   padding: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />

<div class="container">
  <div class=" col-lg-6 box">
    <img src="http://placehold.it/150x100" alt="Null" />
  </div>
  <div class=" col-lg-6 box">
    <img src="http://placehold.it/75x75" alt="Null" />
  </div>
  <div class=" col-lg-6 box">
    <img src="http://placehold.it/150x50" alt="Null" />
  </div>
  <div class=" col-lg-6 box">
    <img src="http://placehold.it/150x150" alt="Null" />
  </div>
</div>

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

Make two column responsive images of same size

html

css

image-size

twitter-bootstrap

来自评论的解释