bootstrap 4 img-fluid does not change image height

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.

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

bwk

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

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>

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>

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

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.

来源：https://stackoverflow.com/questions/41870216/bootstrap-4-img-fluid-does-not-change-image-height

标签

bootstrap-4

responsive-images