Bootstrap で 画像 が 隣り合う時に 高さを調節する
テキスト と 画像 が 隣り合う時に
テキストが 低い場合 指定の画角で表示し
テキストが 高い場合 画像の高さだけ 伸びていく
そんな事できないかなと 思って作ってみました
使い方は 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 で 別途指定しています
使う機会なんて なかなかないと思うけど
何度も 調べる作業も 面倒なので ソースコードをまるっと 備忘録!!