web-dev-qa-db-ja.com

bootstrap 4 img-fluidは画像の高さを変更しません

Bootstrap 4、クラス.img-fluidのレスポンシブ画像は、サイズが不均等に変更されます。高さが維持され、幅が正しく縮小されます。それは画像全体を変形します。 Bootstrap 3でクラス.img-responsive？

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

ところでBootstrap 4ドキュメント（ https://v4-alpha.getbootstrap.com/content/images/ ）でも同じです。サンプルsvgイメージは高さを保持します。幅に関係なく250ピクセル。

bootstrap-4responsive-images
14
Igor Mizak

問題は、表示プロパティがflexに設定されているクラス.rowでdivに画像をラップしたことでした。このクラスを親div画像から削除すると、期待どおりに動作します

30
Igor Mizak

実際height:auto私にはうまくいきませんでしたが、height:100%チャンピオンのように働いた。

7
bwk

画像をFigure要素でラップしてみてください。

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

私の魔法

<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

ログインして、この超高速で、できれば最小限の変更修正を共有するだけです

あなたのスタイルで、単にmin-heightを1pxまたは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>

これが機能することを確認し、携帯電話とタブレットの画面でChromeを変更しません。

0
jordan

Css heightプロパティをautoに設定すると、サイズ変更時に高さも流動的になります。

0
gotomanners