Note（サイズの違う画像が綺麗に並ばない）

Note ノート
問題

サイズの異なる画像を横並びにしたとき、高さがまちまちになって同じ大きさで並ばない。
画像サイズを同じにしておけば良いが、WrdPressで投稿する場合、違う人が作業したり、違うカメラの画像を使うとサムネイル画像が同じ大きさとは限らないので、なんとかしたい。

解決

サンプルHTML

<ul class=“photo-list”>
 <li>
    <figure class=“photo”>
      <img src=“**1.png">
    </figure>
    <div>
      <time>2023.07.01</time>
      <h1 class="title">タイトルタイトル</h1>
    </div>
 </li>
 <li>
    <figure class="pho”to>
      <img src=“**2.png">
    </figure>
    <div>
      <time>2023.07.101</time>
      <h1 class="title">タイトルタイトル</h1>
    </div>
 </li>
 ～～～ (省略) ～～～
</ul>

サンプルCSS

.photo-list {
   display: flex; /* 画像を横並び */
   flex-wrap: wrap; /* 折り返す（今回は横に3個まで） */
   gap: 60px 2%; /* 横3個で4%を隙間2個で2% */
}
.photo-list li {
   width: 32%; /* 横に3個で　32％x3で96％ */
}
.photo-list li figure {
   position: relative;
   overflow: hidden; /* はみ出した部分は非表示 */
   padding-top: 56.25%; /* 16:9の画像表示にしたいので */
}
.photo-list li figure img { /* 画像位置を調整 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 100%;
   height: 100%;
   object-fit: cover; /* 縦横比を固定して表示 */
}

説明は、CSSのコメントで書いてみました。
これで何とか綺麗なレイアアウトにすることができました。

コメント