изображения разных размеров рядом?

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-3 пикселя меньше остальных.https://imgur.com/a/aS9UPth

Answer 1

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>

---

PS: я использовал 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 2

display: flex должен быть задан родительскому элементу, и если вы хотите, чтобы они имели одинаковую высоту, вы должны установить значение для height и позволить width быть автоматически, если общая ширина всех изображений не больше, чем их родительский, они будут в ряд.см. учебник по флексбоксу в w3schools:
Свойство CSS flex
Flexbox CSS

Answer 3

либо делайте их высоту одинаковой (изменяя изображение, обрезая его), либо задавая им конкретную высоту