EN
CSS - match images size to max horizontal flex container item size
7 points
In this short article, we would like to show how to match images size to maximal available item space when we use horizontal flex in CSS.
Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.images {7
padding: 5px;8
border: 1px solid silver;9
box-sizing: border-box; /* <------ used to count padding and border as element size */10
width: 100%;11
height: 200px;12
display: flex; /* <------ used to display items horizontaly */13
}14
15
.item {16
padding: 5px;17
flex: 1; /* <------------- used to make each item having same width */18
display: flex; /* <------------- used to center images */19
}20
21
.image { 22
margin: auto; /* <------------- centers image element horizontaly and verticaly */23
max-width: 100%; /* <------------- used to limit max image size to item size */24
max-height: 100%; /* <------------- used to limit max image size to item size */25
}26
27
</style>28
</head>29
<body>30
<div class="images">31
<div class="item"><img class="image" src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" /></div>32
<div class="item"><img class="image" src="https://dirask.com/static/bucket/1631892380910-mbQLq3JYJX--background-h400-w600.jpg" /></div>33
<div class="item"><img class="image" src="https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png" /></div>34
<div class="item"><img class="image" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" /></div>35
</div>36
</body>37
</html>
