bootstrap 4 img-fluid does not change image height

Question

Responsive Images in Bootstrap 4, with class .img-fluid are resized disproportionally. They keep it's height even width is shrinking down correctly. That is deforming whole image. Is there any way how to make it as smooth as it was in Bootstrap 3 with class .img-responsive? Thanks

<div class="col-sm-6">
    <img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">
</div>

By the way it is same in Bootstrap 4 documentation (https://v4-alpha.getbootstrap.com/content/images/) where sample svg image keeps height 250 pixels regardless of it's width.

I'm having this problem too. Carousel is wrapped in a `.row` class but not actual images. And when I remove the wrapping `.row` it still doesn't work — John Halsey, Jul 05 '17 at 10:08

score 49 · Answer 1 · answered Jan 26 '17 at 11:56

49

The problem was I wrapped image in div with class .row which have display property set to flex. once removed this class from parent div image working as expected

answered Jan 26 '17 at 11:56

Igor Mizak

1,088
1
11
19

A 2 yr old solution that still saves me when I review for Bootstrap – jhnferraris Jul 24 '19 at 06:12
You are brilliant. – Lucid Polygon Jun 01 '20 at 02:02
1

@SuperEye `
` should be `
` – Sara Fuerst Jun 03 '20 at 21:01

score 9 · Answer 2 · edited Aug 22 '17 at 12:22

9

Actually height:auto did not work for me, but height:100% worked like a champ.

edited Aug 22 '17 at 12:22

Bugs

4,491
9
32
41

answered Aug 22 '17 at 11:22

bwk

135
2
8

score 8 · Answer 3 · answered Nov 03 '18 at 14:15

8

Try wrapping your image in a figure element.

<div class="col-sm-6">
    <figure>
        <img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">
    </figure>
</div>

answered Nov 03 '18 at 14:15

Bruce.Norton

171
1
10

@RicardoVigatti Make sure the columns are inside a row. See a codepen example: https://codepen.io/brucenorton/pen/pqZyOe – Bruce.Norton Jan 08 '19 at 21:23

score 8 · Answer 4 · answered May 04 '20 at 18:48

8

<div class="row">
<picture>
    <img src="images/nameimage.png" class="img-fluid" alt="img">
</picture>
</div>

Hi, I managed to solve by placing the tag picture before the image.

Regards,

Mário

answered May 04 '20 at 18:48

Mario Tulio

81
1
1

SiD quakers · Answer 5 · 2018-03-08T10:37:12.870

5

My magic hax

<style>
    figure {
        margin: 16px 40px !important; 
    }
    .img-fluid {
      max-width: 100%;
      height: auto;
    }
</style>
<div class="row align-items-center">
    <div class="col-lg-2">
       <figure>
           <img class="img-fluid" src="path-image.png" />
       </figure
    </div>
</div>

edited Mar 08 '18 at 10:37

answered Mar 08 '18 at 09:07

SiD quakers

63
1
4

@SteveBuzonas my native language is not English, so I can not explain correctly :) But this will help to solve the problem, I hope :) – SiD quakers Mar 08 '18 at 10:30

score 3 · Answer 6 · answered Feb 18 '20 at 11:25

We have an (asp.net core 2.2) app (public portal) with Bootstrap 4.x, whereby the customer can upload his own images and use the img-fluid on various views (with different sizes) in flex.
The images are scaled (resized) automatically by the upload to the size how the images are showed to the end users ("query view").
On the editing view, we have to show the images with correct aspect ratio but smaller.
The end user view is optimized to show the images in landscape ( 1 ) format, but the customer also is able to upload images in portrait ( 2 ) format (the images then have to be scaled to a given height) what is not a problem on the end user view, as the images are scaled automatically correctly by the upload, but in the (smaller) editing view, it definitely is a problem...

Per default, the .img-fluid class applies max-width: 100%; and height: auto; to the image: In my case (I set the width), this leads to a scale of a portrait image to the full width ( 2 ) , what shows the image
way to high ( 3 ).
I want to scale the height to to a given height ( 4 ) (in the example it is 185 Pixel).

Principally, I would be able to overwrite the max-height to the img-fluid to have the needed hight:

 img-fluid {
  max-height: 185px;
}

But this would be a really bad idea, as it would affect all images on all views.

The only solution, that works for my case is:
to overwrite the max-height to 100%:

.img-fluid {
  max-height: 100%;
}

and set the height to the container control explicitly to the needed height:

<div id="WirUeberUnsFotoUpload" style="height:185px">
   <div> --- Noch kein Foto  hochgeladen --- </div>
</div>

Note: The Text to the div „ --- Noch kein Foto hochgeladen --- „ is replaced by the uploaded image via JQuery at runtime.

This leads to the wanted result ( 5 ) :

This way, the image ( 5 ) is scaled correct to the needed height ( 4 ) and don’t affect the other views.
Note: Both, to set the height to the container and to set max-height: 100% is needed.

score 2 · Answer 7 · answered Dec 31 '20 at 18:26

2

Try adding .h-100 class to the img element. This forces the image's height to match the parent div.

<div class="col-sm-6">
    <img class="img-fluid h-100" src="/assets/blogs/14853991244821.jpg" alt="">
</div>

answered Dec 31 '20 at 18:26

Armaan S

73
5

score 1 · Answer 8 · answered Mar 26 '19 at 03:33

just logged in to share this super quick, and hopefully minimal changing fix

in you style, simply set min-height to 1px or 1rem

<head>
    ...
    <style>
    .ieFix
    {
        min-height:1px;
    }
    </style>
</head>
<body>
<div class="card text-center">
    <img src="..." class="card-img-top ieFix" alt="...">
        <div class="card-body">
            <h5 class="card-title">...</h5>
            <p class="card-text">...</p>
            <p class="card-text post-meta"...</p>
        </div>
</div>
</body>

Have confirmed this works and nothing changes on Chrome in mobile phone and tablet screens.

score 0 · Answer 9 · answered Jan 26 '17 at 09:55

0

If you set the css height property to auto then the height will also be fluid when resizing.

answered Jan 26 '17 at 09:55

gotomanners

7,808
1
24
39

1

this is Bootstrap 4 css rule applied to img-fluid class: .img-fluid { max-width: 100%; height: auto; } – Igor Mizak Jan 26 '17 at 11:31
@IgorMizak Exactly! If you inspect the bootstrap documentation example,you'll see it explicitly sets a `height: 250px`. Thats why it stays fixed, so If you remove it you'll see the image height changing when you resize. – gotomanners Jan 26 '17 at 11:40
yes just noticed element property height is set to 250px but i dont have set height anywhere. and image is deformed. Actually I found what is the problem :) Will answer myself – Igor Mizak Jan 26 '17 at 11:55

Dipanjan Ghosal · Answer 10 · 2022-06-21T11:09:53.407

0

This worked for me:

img {

    height: 75% !important;  
}

Or you can also use max-height:

img {
        max-height:75%;
}

edited Jun 21 '22 at 11:09

answered Jun 21 '22 at 10:51

Dipanjan Ghosal

21
3

bootstrap 4 img-fluid does not change image height

10 Answers10

Linked