是否有任何解决方案可以显示一系列彼此相邻的不同尺寸的图像，并且所有图像都具有相同的高度而不会破坏图像？

Question

我的问题是我需要显示一系列彼此相邻的图像（最多5个），但是图像具有不同的尺寸，例如，正方形（150x150）的图像看起来比那个图像更大。一个矩形。我需要在不破坏图像分辨率的情况下将它们全部显示在同一高度。重要的是要说我有5个带有img标签的div，其中的想法是拥有1个div并使其成为动态，因此编辑器可以放置自己的图像。

我正在使用的技术：Bootstrap 4

这就是它的样子：https://imgur.com/CqlTSll它应该是这样的：https://imgur.com/pP3fsb4

我已经尝试将最大宽度为75px放到包含img的div中，但是图像的某些部分未显示。

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.scrolling-wrapper-flexbox {
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.scrolling-wrapper-flexbox::-webkit-scrollbar {
  display: none;
}

.imgbox {
  max-width: 150px;
  flex: 0 0 auto;
  margin-right: 3px;
}

.title {
  color: #142834;
  line-height: 21px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
}

.link {
  margin-top: 34px;
}

.img-styles {
  width: auto;
  max-width: 150px;
}

<div class="container mt-5">
  <div class="row d-flex justify-content-center">
    <div class="col-9 col-sm-10 col-md-11 col-xl-10">
      <div class="d-flex justify-content-center">
        <h4 class="title">Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
      </div>
      <div class="d-flex scrolling-wrapper-flexbox justify-content-between">
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="https://upload.wikimedia.org/wikipedia/commons/3/30/Zanella.png" alt="img1"></div>
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="http://www.uniminuto.edu/documents/991974/8397593/logo_issuu.png/081442f2-a9a8-4041-b0ef-9c47939df481?version=1.0&t=1511884354155&imagePreview=1" alt="img2"></div>
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Logo_Globosat.svg/500px-Logo_Globosat.svg.png" alt="img3"></div>
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Logo_MAM.png" alt="img4"></div>
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="https://www.pngeiti.org.pg/wp-content/uploads/2018/03/cropped-favicon-270x270.png" alt="img5"></div>
      </div>
      <div class="d-flex justify-content-center">
        <a href="#" class="link">Lorem ipsum dolor</a>
      </div>
    </div>
  </div>
</div>

这个想法是所有div和img标签都有相同的行为，因为后来我想让它动态并留下1个div，所以编辑器可以输入自己的图像。

Answer 1

使用bootstrap 4，这两个解决方案应该工作：

.bootstrap-grid {
  display: inline-grid;
  grid-template-columns: repeat(5, 20%);
  align-items: baseline;
}
.bootstrap-grid img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  padding: 1rem;
}
.icons-flex > .container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}
.icons-flex > .container > div {
  flex-grow: 1;
  flex-direction: row;
  width: 20%; 
  text-align: center;
}
.icons-flex > .container > div > img {
  max-width: 100%;
  max-height: 120px;
  padding: 1rem;
}

<div class="container">
    <h2 class="text-center mt-4">Bootstrap Grid</h2>
    <div class="row mt-3 bootstrap-grid">
        <div class="grid"><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Zanella.png"></div>
        <div class="grid"><img src="http://www.uniminuto.edu/documents/991974/8397593/logo_issuu.png/081442f2-a9a8-4041-b0ef-9c47939df481?version=1.0&t=1511884354155&imagePreview=1"></div>
        <div class="grid"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Logo_Globosat.svg/500px-Logo_Globosat.svg.png"></div>
        <div class="grid"><img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Logo_MAM.png"></div>
        <div class="grid"><img src="https://www.pngeiti.org.pg/wp-content/uploads/2018/03/cropped-favicon-270x270.png"></div>
    </div>
    <h2 class="text-center mt-4">Flex</h2>
    <div class="row mt-3 flex icons-flex">
        <div class="container">
            <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Zanella.png"></div>
            <div><img src="http://www.uniminuto.edu/documents/991974/8397593/logo_issuu.png/081442f2-a9a8-4041-b0ef-9c47939df481?version=1.0&t=1511884354155&imagePreview=1"></div>
            <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Logo_Globosat.svg/500px-Logo_Globosat.svg.png"></div>
            <div><img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Logo_MAM.png"></div>
            <div><img src="https://www.pngeiti.org.pg/wp-content/uploads/2018/03/cropped-favicon-270x270.png"></div>
        </div>
    </div>
</div>

我希望有所帮助。这里是fiddle

Answer 2

您可以在max-height（或.img-styles标签周围的div）添加img属性，但如果您将所有图像放在一个div中，这将不起作用）

如果你想让图像完全具有相同的高度，你应该从max-width和.img-styles中删除.imgbox。在这种情况下，您还需要高度超过指定max-height的图像。这个结果可能会导致一些非常宽的图像。

在你的模型看起来它应该看起来一些元素的高度仍然较小，所以我会保持max-width属性来控制一些元素的宽度。在这种情况下，图像的实际高度较少，因为并非所有内容都具有相同的高度。