Question

我有5张图片，它们的宽度和高度互不相同。
我试图将这5张图片并排放置在中间，并确保每个图像的高度都相同。我尝试了flex，grid，float和position以使其尽可能接近，但是，某些图像的像素高度更高或更低，而一张图片与其他图片相比却很小。

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

，这是它的外观图像。如您所见，“高级联赛”徽标比其他徽标小得多，而ligue1徽标比其他徽标小2-3px。 https://imgur.com/a/aS9UPth

Answer 1

display：flex必须提供给父元素，如果要让它们具有相同的高度，则如果所有图像的总宽度不大于其父元素，则应将height的值设置为auto，并将width设置为auto ，他们将排成一排。参见w3schools的flex box教程：
CSS flex Property
CSS Flexbox

Answer 2

TL，DR; 这可能是您要查找的内容：

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

实际答案：

您需要指定显示所有图像的height。您可能要使用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来获取并设置图像的高度，因为它不像香草那样冗长。如果有人需要它，我可以编写与jQuery相当的代码，但是在这里看起来有些过分了。

PS 2：如果不希望每个.container中的所有图像都缩小或放大到最短或最高，则可能需要用更具体的选择器替换.containers在那个特定的容器中。这适用于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>

Answer 3

要么使它们的高度相同（通过裁剪来改变图片），要么给它们指定特定的高度

并排的不同大小的图像？

3 个答案: