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; /* should align items to the top of your flex row if they don't reach 100px in height */
}
.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>