ミギムキ

[CSS] 縦横比やサイズの違う画像をカード形式できれいに並べたい

サンプルコード

html

<ul class="list_card"> <li> <a href=""> <div class="list_card_image"> <img src="./images/sample01.jpg" alt="サンプル画像"> </div> <p>サンプル画像</p> </a> </li> <li> <a href=""> <div class="list_card_image"> <img src="./images/sample02.jpg" alt="サンプル画像"> </div> <p>サンプル画像</p> </a> </li> <li> <a href=""> <div class="list_card_image"> <img src="./images/sample03.jpg" alt="サンプル画像"> </div> <p>サンプル画像</p> </a> </li> <li> <a href=""> <div class="list_card_image"> <img src="./images/sample04.jpg" alt="サンプル画像"> </div> <p>サンプル画像</p> </a> </li> </ul>
スポンサー広告

CSS

.list_card { display: flex; flex-wrap: wrap; justify-content: center; margin: -10px -5px 0px; list-style: none; } .list_card > li { margin: 10px 5px 0px; background-color: #fff; width: calc(50% - 10px); } .list_card > li > a { display: flex; flex-direction: column; padding: 10px; height: 100%; text-decoration: none; } .list_card_image { height: 200px; } .list_card_image > img { display: block; margin: 0px auto; max-width: 100%; max-height: 100%; } .list_card_image + p { padding: 1em 0px 0px; margin: auto 0px 0px; text-align: center; line-height: 1.5; } @media print, (min-width: 768px) { .list_card > li { width: calc(33.3% - 10px); } } @media print, (min-width: 992px) { .list_card > li { width: calc(25% - 10px); } }
  • モバイル表示時は一行あたり2枚、そこからウィンドウサイズに応じて段階的に3枚、4枚と一行あたりの表示枚数を増やしています
  • 画像の表示領域である「list_card_image」クラスのheightを200pxとし、更に「list_card_image」クラスの内のimgタグのmax-widthとmax-heightをそれぞれ100%とすることで、高さ200pxの表示領域に画像が収まるようにしています。表示する画像によって、高さは適宜調整してください

キャプションの表示位置を揃える

.list_card > li > a { display: flex; flex-direction: column; padding: 10px; height: 100%; text-decoration: none; } .list_card_image + p { padding: 1em 0px 0px; margin: auto 0px 0px; text-align: center; line-height: 1.5; }
スポンサー広告