【CSS】色々なサイズの画像を揃えるための画像の配置方法【小ネタ】

ちょっとした小ネタも不定期に紹介していきます。

例えばこのような画像を3つとも同じサイズに揃えて配置するときに役に立つ方法です。
画像をwidth:100%で並べても高さが合わず、overflowで区切っても場合によっては隙間ができてしまうと言った時に有効な方法です。

<ul class="box">
  <li><img src="./img/01.png" alt="test"></li>
  <li><img src="./img/02.png" alt="test"></li>
  <li><img src="./img/03.png" alt="test"></li>
</ul>

.box {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
  box-sizing: border-box;
  list-style: none;
  margin:0;
  padding:0;
}
.box li {
  position:relative;
}
.box li::before {
  content:"";
  display:block;
  padding-top:100%;
}
.box li > img {
  position:absolute;
  top:0;
  object-fit:cover;
  width:100%;
  height:100%;
}

padding-topの値がこのボックスの縦の高さになります。例えば16:9の比率にしたい場合は、padding-topを56.25%に設定します。

このような感じで画像を同じサイズに統一したタイルにすることが出来ます。

paddingの上下は親要素の横幅に対して比率を出すようになっているので、この様に、％で指定をしてあげることで横幅に対しての高さを設定することが出来ます。

このような感じで、小ネタもNOTEでやってみようと思います。
もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！