web-dev-qa-db-fra.com

bootstrap 4 img-fluid ne change pas la hauteur de l'image

Les images réactives dans Bootstrap 4, avec la classe .img-fluid sont redimensionnées de manière disproportionnée. Elles conservent sa hauteur, même sa largeur diminue correctement. Cela déforme l'image entière. Existe-t-il un moyen de le faire aussi fluide que dans Bootstrap 3 avec la classe .img-responsive? Merci

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

Soit dit en passant, c'est la même chose dans Bootstrap 4 ( https://v4-alpha.getbootstrap.com/content/images/ ) où l'exemple d'image svg garde la hauteur 250 pixels quelle que soit sa largeur.

bootstrap-4responsive-images
14
Igor Mizak

Le problème était que j'ai enveloppé l'image dans div avec la classe .row dont la propriété d'affichage est définie sur flex. une fois cette classe supprimée de l'image parent div fonctionnant comme prévu

30
Igor Mizak

Réellement height:auto n'a pas fonctionné pour moi, mais height:100% a travaillé comme un champion.

7
bwk

Essayez d'envelopper votre image dans un élément de figure.

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

Mon hax magique

<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>
1
SiD quakers

juste connecté pour partager ce correctif de changement super rapide et, espérons-le, minimal

dans votre style, définissez simplement la hauteur minimale sur 1px ou 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>

Ont confirmé que cela fonctionne et rien ne change sur Chrome sur les écrans des téléphones mobiles et des tablettes.

0
jordan

Si vous définissez la propriété css height sur auto, la hauteur sera également fluide lors du redimensionnement.

0
gotomanners