0

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:

Mukyuu
  • 6,436
  • 8
  • 40
  • 59
ms.tery
  • 149
  • 1
  • 4
  • 15
  • What is the issue and how does it look like now ( an example preview image can be useful ) ? – cjmling Dec 17 '19 at 08:20
  • 1
    @Emz1402 are you trying to set the height of col-lg-6 img to have the height to cover the height of col-lg-3? – HUSSAIN Dec 17 '19 at 08:23
  • 1
    or if you are trying to set the height of all images same then try set a specific height for all 3 images and also try to use max-height if needed it will be not exceed the width because of img-responsive. – HUSSAIN Dec 17 '19 at 08:26
  • Does this answer your question? [How to set responsive image's max width (Bootstrap 4)?](https://stackoverflow.com/questions/53721711/how-to-set-responsive-images-max-width-bootstrap-4) – Pirta Matharu Dec 17 '19 at 08:26
  • sorry i added the a preview of current image row. – ms.tery Dec 17 '19 at 08:30
  • i need to align the height of image 2 and image 3 to image 1.. – ms.tery Dec 17 '19 at 08:31
  • my pleasure, And if you are using bootstrap 4 then you should use img-fluid bcz img-responsive doesn't work in bootstrap 4 – HUSSAIN Dec 17 '19 at 09:32

2 Answers2

0
<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

Pirta Matharu
  • 267
  • 1
  • 5
  • 22
0

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.

help-info.de
  • 6,695
  • 16
  • 39
  • 41
mudassar shaikh
  • 1
  • 1