Bootstrap4の<カード(Cards)で画像が縦に伸びてしまう>IE対策

IEでBootstrap4で使ったページのカード(card)画像が縦に伸びてしまう場合の対処方法

対処方法【1】

h-100クラスをimgタグに追加

<img class="card-img-top h-100" src="img/〇〇〇.jpg" alt="カードの画像">

 

対処方法【2】

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

<div class="card d-block">

 

対処方法【3】

スタイルシートの追加

既にページを作りこんだ後に発覚した場合はCSSを追加するのが早い。

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

 

参考 【bootstrap4】ie11でcard-img-topクラスの画像が縦に伸びる

参考 [Bootstrap 4] cardの写真がIEで伸びてしまう件

 

コメント

タイトルとURLをコピーしました