Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用していますSWELLについて

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

Bootstrap Card

Cardを使う機会って多くないですか?便利だなぁって使うのですが、何だかIEで画像が縦に長くなってしまって・・・バグの様です。

IEでcardの写真が伸びる

ソースコードはこんな感じになると思います。

<div class="toc col-12 col-sm-6">
<div class="card h-100">
  <img class="card-img-top" src="http://XXX.jpg" alt="3">
  <div class="card-body">
    <h4 class="card-title">タイトル</h4>
    <p class="card-text">テキスト、テキストテキスト、テキスト</p>
  </div>
 <div class="menu_page"><a href="#">ボタン</a></div>
</div>
</div>

いろいろ方法があるようですが、以下のCSSを追加して解決しました。

.card-img-top {
	max-width: 100%;
	flex-shrink:0;
 }
よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX