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

如果您知道图像的高度，可以通过执行以下操作来强制使用CSS：

.float-left img {
    height:(value)px;
    width:auto;
}

Answer 2

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

Answer 3

半响应解决方案。

使用媒体查询为每种屏幕尺寸设置不同的高度。

它没有完全响应，图像不会占据容器的整个宽度。但每个图像都具有相同的高度 - 每个屏幕尺寸的固定高度。

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

  }

}

与Bootstrap v4相同的高度图像

3 个答案: