Skip to content

CSS code snippet – html 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;
}
See also  How to style echo in PHP?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.