Bootstrap で 画像 が 隣り合う時に 高さを調節する
この記事は 2019年 4月 25日 に書かれた記事です。
テキスト と 画像 が 隣り合う時に
テキストが 低い場合 指定の画角で表示し
テキストが 高い場合 画像の高さだけ 伸びていく
そんな事できないかなと 思って作ってみました
使い方は d-flex flex-row を 指定した中で card-contents と card-img を 並べてやるだけです
<div class="card">
<div class="card-body d-flex flex-row">
<div class="card-contents">
<h2 class="card-title">Card title</h2>
<p class="card-text">card's content.</p>
</div>
<figure class="card-img ratio-16-9">
<img class="img-cover w-100" src="..." alt="Card image cap">
</figure>
</div>
</div>
<style>
.img-cover { object-fit: cover; }
</style>
画像が 枠内で 全体表示されるように CSS で 別途指定しています
使う機会なんて なかなかないと思うけど
何度も 調べる作業も 面倒なので ソースコードをまるっと 備忘録!!
Related Article
詳細へ »
