ブートストラップ4のレスポンスイメージは、.img-fluidのクラスが不均衡にリサイズされています。彼らは幅が正しく収縮しても高さを保つ。それが全体像を変形させている。ブートストラップ3のように滑らかにする方法はありますか.img-responsiveですか？おかげブートストラップ4 img-fluidはイメージの高さを変更しません
<div class="col-sm-6">
<img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt="">
</div>
それはサンプルのSVG画像は関係なく、それの幅の高さ250ピクセルを保持するブートストラップ4ドキュメント（https://v4-alpha.getbootstrap.com/content/images/）においても同様であるところで。
heightプロパティをautoに設定すると、サイズ変更時に高さも低下します。
これはimg-fluidクラスに適用されたブートストラップ4のCSSルールです： .img-fluid { max-width：100％; 身長：自動; } –
@IgorMizakまさに！ブートストラップの文書例を調べると、明示的に 'height：250px'が設定されていることがわかります。なぜそれは固定されたままだから、それを取り除くと、サイズを変更するとイメージの高さが変わるのを見るでしょう。 – gotomanners
はい、ただ気づいた要素プロパティの高さは250pxに設定されていますが、どこにでも高さを設定していません。画像が変形する。実際に私は問題が何かを発見:)自分自身に答える –
問題は、表示プロパティがflexに設定されているクラス.rowを使用してdiv内のイメージをラップしたことです。一度このクラスを親divイメージから削除しました。
実際にはheight:autoは私のためには機能しませんでしたが、height:100%はチャンピオンのように働いていました。
私の魔法の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>
あなたのコードで何が起こっているのか説明できますか？ –
@SteveBuzonas私の母国語は英語ではないので、私は正しく説明できません:)しかし、これは問題を解決するのに役立ちます、私は願っています:) –
実際のコードを入力してください。ありがとう。 –
私もこの問題を抱えています。カルーセルは '.row'クラスでラップされますが、実際のイメージではラップされません。そして、私がラップ '.row 'を取り除いてもまだ動作しません。 –