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.

回答1:

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

回答2:

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

回答3:

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>

回答4:

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>

回答5:

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

回答6:

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