csswordpressimagebootstrap-5image-scaling

Scaling Wordpress images to same height inside Bootstrap flex-row flex-nowrap

I have Bootstrap integrated with Wordpress Underscores Template.

I want to make a horizontaly scrollable container with images that have the same height.

I'm stuck on the point, that I have scrollable container, but images height is not the same;

/*for example purposes*/
.example{
  background:pink;
}

/*underscores style.css*/
img {
    height: auto;
    max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid overflow-auto border border-dark">
        <div class="row flex-row flex-nowrap">
            <div class="col-3"><img class="example" width="755" height="523"><br><em>text1</em></div> 
            <div class="col-3"><img class="example" width="555" height="623"><br><em>text2</em></div> 
            <div class="col-3"><img class="example" width="455" height="123"><br><em>text3</em></div> 
            <div class="col-3"><img class="example" width="255" height="323"><br><em>text4</em></div> 
            <div class="col-3"><img class="example" width="555" height="823"><br><em>text5</em></div> 
        </div>
    </div

Solution

  • When you want to match the size of images and you don't know the specific size of each of them, it is best to make them fit using css.

    The object-fit property is great. It helps us resize an or to fit its container. It works just like a background-image.

    It has different properties that will be useful depending on what you want to do. It is important to define the size of the container so that it fits correctly.

    Here more information about this property

    The interesting thing is that it has a property to align the position of the element inside the container, this is called object-position

    Check this in your style. Define a height for the images, the rest is done.

    img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}