福山市のホームぺージ作成・ストリートビュー撮影・WEBアプリ開発などご相談ください
モバイルテント株式会社
10:00~17:00(月〜金)

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

bootstrap4のcard-img-topクラスの画像がInternet Explore11で閲覧するとビヨーンと縦に伸びて困ったので忘備録。

Internet Explore11だけ画像が縦に伸びる!

他のブラウザでは問題ないのですが、ie11だけ縦にのびてデザインがおかしなことに。

Chrome・Firefoxの場合

Internet Explore11の場合

Ver.11.285.17134.0
Update Ver.11.0.85

対処方法

Internet Explore11かbootstrap4のバグのようです。
https://github.com/twbs/bootstrap/issues/21885
こちらのサイトの投稿を参考にして2つ試してみました。

対応1)h-100クラスをimgタグに追加


<div class="card">
   <img class="card-img-top h-100" src="" alt="">

対応2)d-blockクラスをcardクラスに追加


<div class="card d-block">
<img class="card-img-top" src="" alt="">

どちらも正常に表示されるようになりました!