Bootstrap4のcardのcard-img-topがIE11で画像が縦に伸びる

2020年4月8日Bootstrap

Bootstrap4のcardクラスをIE11で確認した場合にcard-img-topクラス部分の画像が縦に伸びる場合の対処方法

環境

フレームワーク

Bootstrap4

クラス

card

ブラウザ

IE11

症状

Bootstrap4のcardクラスの画像部分card-img-topクラスがIE11で確認した場合に縦に伸びる

対処方法1

cardクラスにd-blockクラスを追加する

<div class="card">

のcardクラス部分にd-blockクラスを追加

<div class="card d-block">

対処方法2

card-img-topクラスにh-100クラスを追加する

<img class="card-img-top" src="/img/card.png" alt="card img">

のcard-img-topクラス部分にh-100クラスを追加

<img class="card-img-top h-100" src="/img/card.png" alt="card img">

対処方法3

CSSでcard-img-topクラスに要素を追加

下記のCSSコードを追加する

<style>
.card-img-top {
max-width: 100%;
flex-shrink:0;
}
</style>

Posted by MiuxMiu