如何使图像在行中响应高度和宽度 - bootstrap 4

Question

I'm working on a project and I need to display the images the same height in the row column.

Below is my code:

    <div class="row">
        <div class="content adjustment col-lg-6">
            <a href=""><img class="image image1 img-responsive" src="images/assets/one.png" /></a>
            <div class="on_hover">
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
            </div>
        </div>
        <div class="content adjustment higher col-lg-3">
            <a href=""><img class="image image2 img-responsive" src="images/assets/two.png"
                    style="width:100%;height:80%;" /></a>
            <div class="on_hover">
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
            </div>
        </div>
        <div class="content adjustment col-lg-3">
            <a href=""><img class="image img-responsive" src="images/assets/three.png" style="width:100%;height:80%;" /></a>
            <div class="on_hover">
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
            </div>
        </div>
    </div>

Preview of the current website:

Answer 1

<div class="row">
    <div class="content adjustment col-lg-6">
        <a href=""><img class="image image1 img-responsive" src="https://via.placeholder.com/500" style="width:100%;height:auto;" /></a>
        <div class="on_hover">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
        </div>
    </div>
    <div class="content adjustment higher col-lg-3">
        <a href=""><img class="image image2 img-responsive" src="https://via.placeholder.com/150"
                style="width:100%;height:auto;" /></a>
        <div class="on_hover">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
        </div>
    </div>
    <div class="content adjustment col-lg-3">
        <a href=""><img class="image img-responsive" src="https://via.placeholder.com/150" style="width:100%;height:auto;" /></a>
        <div class="on_hover">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
        </div>
    </div>
</div>

Check here

Answer 2

Replace the img-responsive to img-fluid .

In bootstrap 3 we used img-responsive for the responsive image but is is changed in bootstrap 4.