images with different sizes side by side? - html

Question

I have 5 images and their width and height are different to each other.
I'm trying to put these 5 pictures side by side in the center and make sure so the height of every imags is the same. I have tried flex, grid, float and positions to make it as close as possible, but still, some images are some pixels heigher or lower while one picture is very small compared to other.
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%;
}
If there are any tutorials or sites that would show how to put images with different sizes side by side and make the same height by using Grid or Flexbox, that would be nice.
Thank you.
EDIT:
cleaned up the CSS and it looks like this now.
.container {
display: flex;
justify-content: center;
}
.leagues {
height: 200px;
width: auto;
}
and here is the image of how it looks.
as you can see, "premier league" logo is much smaller than others and the ligue1 logo is 2-3px smaller than rest.
https://imgur.com/a/aS9UPth

Answer 1

TL,DR; This is probably what you're looking for:
.container > img {
height: 100%;
width: auto;
}
.container {
height: 160px;
display: flex;
justify-content: center;
}
Actual answer:
You need to specify which is the height all images should be displayed at.
You might want to specify it using CSS or use either the shortest or the tallest image:
Hardcode using 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>
Use the shortest image:
$(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>
Use the tallest image:
$(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>
As you can see, as long as you specify the same height for all, and width:auto they will already be displayed beside one another and all you need to do is center the .container in its parent, by adding display: flex; justify-content: center; to .container's parent.
Example:
$(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: I used jQuery to get and set image's height as it's less verbose than vanilla. If anyone needs it, I can write the jQuery-less equivalent, but it seemed overkill here.
P.S 2: You might want to replace .container selector with a more specific one if you don't want all the images in each of your .containers get reduced or enlarged to the shortest or tallest one in that particular container. This applies to both JS and CSS.
Last, but not least, the height might as well be hard-coded on the parent element and that would require no JavaScript, pretty much like the first example:
.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 must be given to the parent element , and if you want them same height , you should set a value for height and let width to be auto , if total width of all images don't be bigger than their parent , they will be in a row .
see flex box tutorial on w3schools :
CSS flex Property
CSS Flexbox

Answer 3

either make their height the same (changing the picture by cropping it) or giving them a specific height