带有自举V4的高度图像

Question

我的图像具有相同的高度但宽度不同。如何以相同的高度连续显示它们并使其响应迅速。

例如，我想在一行中显示3个图像，以使每个图像具有相同的高度。

<div class="row">
  <div class="float-left">
    <img src="img1.png" class="??">
  </div>
  <div class="float-left">
    <img src="img2.png" class="??">
  </div>
  <div class="float-left">
    <img src="img3.png" class="??">
  </div>
</div>

Answer 1

选择一个高度和宽度，例如3，然后写<img src="img.png" height="3" width="3">

Answer 2

半响应解决方案。

使用媒体查询为每个屏幕尺寸具有不同的高度。

它不是完全响应的，并且图像不会占据容器的全部宽度。但是每个图像的高度相同 - 每个屏幕尺寸的固定高度。

html（haml）：

.row.my-list
  .card.d-flex.align-items-stretch.align-self-center
    %img.card-img-top{:src => "img1.png"}/
  .card.d-flex.align-items-stretch.align-self-center
    %img.card-img-top{:src => "img2.png"}/
  .card.d-flex.align-items-stretch.align-self-center
    %img.card-img-top{:src => "img3.png"}/

css（sass）：

.my-list{
  .card{
    border: 0;
  }
  img{
    @include media-breakpoint-down(sm) {
      height: 40px;
    }
    @include media-breakpoint-up(md) {
      height: 100px;
    }
  }
}