html - 不同尺寸的图像并排？

Question

我有 5 张图片，它们的宽度和高度彼此不同。
我试图将这 5 张图片并排放在中间，并确保每张图片的高度都相同。我已经尝试过 flex、grid、float 和 positions 以使其尽可能接近，但仍然有一些图像的像素高或低，而一张图片与另一张图片相比非常小。

html.

<div class="container">
<img class="leagues" id="l1" src="assets/img/ligue1.png" alt="">
<img class="leagues" id="pl" src="assets/img/premierleague.png" alt="">
<img class="leagues" id="cl" src="assets/img/championsleague.png" alt="">
<img class="leagues" id="la" src="assets/img/laliga.png" alt="">
<img class="leagues" id="bl" src="assets/img/bundesliga.png" alt="">
</div>

CSS。

.leagues {
display: flex;
flex-wrap: wrap;
flex-direction: row;
float: left;
overflow: hidden;
max-height: 160px;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;

}

如果有任何教程或网站可以展示如何使用 Grid 或 Flexbox 并排放置不同尺寸的图像并使其高度相同，那就太好了。

谢谢。

编辑:

清理了 CSS，现在看起来像这样。

.container {
display: flex;
justify-content: center;
}

.leagues {
height: 200px;
width: auto;
}

这是它的外观图片。如您所见，“premier league” Logo 比其他 Logo 小得多，ligue1 Logo 比其他 Logo 小 2-3px。 https://imgur.com/a/aS9UPth

Answer 1

TL,DR;这可能是您正在寻找的:

.container > img {
  height: 100%;
  width: auto;
}
.container {
  height: 160px;
  display: flex;
  justify-content: center;
}

---

实际答案:

您需要指定显示所有图像的高度。您可能希望使用 CSS 指定它或使用最短或最高的图像:

使用 CSS 进行硬编码:

.container > img {
  height: 150px;
  width: auto;
}

<div class="container">
  <img src="https://via.placeholder.com/150x100" alt="">
  <img src="https://via.placeholder.com/150x125" alt="">
  <img src="https://via.placeholder.com/150x150" alt="">
  <img src="https://via.placeholder.com/150x175" alt="">
  <img src="https://via.placeholder.com/150x200" alt="">
</div>

使用最短的图片:

$(window).on('load', function(){
  let height;
  $.each($('.container'), function(_i, container){
    $.each($('img', container), function (_i, img) {
      height = height
        ? Math.min(height, $(img).height())
        : $(img).height();
    });
    $.each($('img', container), function(_i, img){ $(img).height(height) });
  });
})

.container > img {
  width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <img src="https://via.placeholder.com/150x100" alt="">
  <img src="https://via.placeholder.com/150x125" alt="">
  <img src="https://via.placeholder.com/150x150" alt="">
  <img src="https://via.placeholder.com/150x175" alt="">
  <img src="https://via.placeholder.com/150x200" alt="">
</div>

使用最高的图片:

$(window).on('load', function(){
  let height;
  $.each($('.container'), function(_i, container){
    $.each($('img', container), function (_i, img) {
      height = height
        ? Math.max(height, $(img).height())
        : $(img).height();
    });
    $.each($('img', container), function(_i, img){ $(img).height(height) });
  });
})

.container > img {
  width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <img src="https://via.placeholder.com/150x100" alt="">
  <img src="https://via.placeholder.com/150x125" alt="">
  <img src="https://via.placeholder.com/150x150" alt="">
  <img src="https://via.placeholder.com/150x175" alt="">
  <img src="https://via.placeholder.com/150x200" alt="">
</div>

如您所见，只要您为所有指定相同的高度，并且 width:auto 它们就会并排显示，您需要做的就是将 居中.container 在其父级中，通过添加 display: flex; justify-content: center; 到 .container 的父级。
示例:

$(window).on('load', function(){
  let height;
  $.each($('.container'), function(_i, container){
    $.each($('img', container), function (_i, img) {
      height = height
        ? Math.min(height, $(img).height())
        : $(img).height();
    });
    $.each($('img', container), function(_i, img){ $(img).height(height) });
  });
})

.container > img {
  width: auto;
}
.center-me {
  display: flex;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="center-me">
  <div class="container"
    ><img src="https://via.placeholder.com/150x100" alt=""
    ><img src="https://via.placeholder.com/150x125" alt=""
    ><img src="https://via.placeholder.com/150x150" alt=""
    ><img src="https://via.placeholder.com/150x175" alt=""
    ><img src="https://via.placeholder.com/150x200" alt=""
  ></div>
</div>

---

P.S:我使用 jQuery 来获取和设置图像的高度，因为它比 vanilla 更简洁。如果有人需要它，我可以编写无 jQuery 的等价物，但它在这里似乎有点过分了。

P.S 2:如果您不想减少每个 .containers 中的所有图像，您可能需要用更具体的选择器替换 .container或扩大到该特定容器中最短或最高的容器。这适用于 JS 和 CSS。

---

最后但同样重要的是，高度也可以硬编码在父元素上，这不需要 JavaScript，就像第一个示例一样:

.container > img {
  height: 100%;
  width: auto;
}
.container {
  height: 120px;
  display: flex;
  justify-content: center;
}

<div class="container">
  <img src="https://via.placeholder.com/150x100" alt="">
  <img src="https://via.placeholder.com/150x125" alt="">
  <img src="https://via.placeholder.com/150x150" alt="">
  <img src="https://via.placeholder.com/150x175" alt="">
  <img src="https://via.placeholder.com/150x200" alt="">
</div>