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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div >
        <div >
            <div ><img  width="755" height="523"><br><em>text1</em></div> 
            <div ><img  width="555" height="623"><br><em>text2</em></div> 
            <div ><img  width="455" height="123"><br><em>text3</em></div> 
            <div ><img  width="255" height="323"><br><em>text4</em></div> 
            <div ><img  width="555" height="823"><br><em>text5</em></div> 
        </div>
    </div

CodePudding user response：

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;
}