how to make all images the same size css code example
Example 1: make images same size css
img {
float: left;
width: 100px;
height: 100px;
object-fit: cover;
}
Example 2: html css how to arrange images of different sizes
.flex-container {
flex-flow: row;
justify-content: space-between;
align-items: flex-start;
}
.inner-image {
max-height: 100px;
}
.inner-image.portrait {
height: 200px;
width: 100px;
}
.inner-image.landscape {
height: 100px;
width: 200px;
}
Example 3: product list fix height image css
<div class="container">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
</div>