CSS

レスポンシブで正方形を維持させる

今回やりたいこと

幅と高さをpxで固めずにレスポンシブで正方形を維持させる方法を紹介します。
且つ、今回はその正方形のエリアに画像を配置させます。元々正方形ではない画像を正方形のエリアにいい感じにCSSで切り取って中央で配置させます。

pxで固めるとなるとブレークポイントを細かく分岐してそれぞれでCSSを書かなければいけませんが、widthで%を使用しても正方形を作ることが可能です。

HTML

まずHTMLです。簡単にリスト形式で画像を表示させたい場合を考えます。ここのimg要素に設定する画像は正方形でないものをチョイスしてください。


<ul>
  <li>
    <img src="画像のパス" alt="">
  </li>
  <li>
    <img src="画像のパス" alt="">
  </li>
  <li>
    <img src="画像のパス" alt="">
  </li>
  <li>
    <img src="画像のパス" alt="">
  </li>
  <li>
    <img src="画像のパス" alt="">
  </li>
</ul>

CSS

scss記法で記述しています。


ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;

  li {
    position: relative; // 浮かせたimg要素の基準
    width: calc((100% - 20px) / 3); // 3カラムで表示させる
    margin-top: 10px;

    &:before {
      content: "";
      display: block;
      padding-top: 100%; 
    }

    img {
      position: absolute; // 浮かせる
      width: 100%; // 親要素の100%
      height: 100%; // 親要素の100%
      top: 0;
      left: 0;
      object-fit: cover; // 画像をリサイズしていい感じに覆ってくれる
    }
  }
}

簡単に解説すると、img要素の親要素に擬似要素(:before)を生成して「padding-top(pdding-bottomでもOK)」100%を指定します。今回の場合はimg要素の親要素はli要素になりますね。

そうすることでimg要素の親要素はブラウザの横幅を変更しても常に正方形で保たれるようになります。paddingのエリアを使って要素を正方形をに保っているということです。

そしてimg要素の親要素に対して「position: relative」を指定し、img要素自身はposition:absoluteで浮かせます。top/leftを指定して基準となる親要素(今回はli要素)の上に配置すれば完了です。

object-fit」プロパティを指定することでCSSでいい感じにリサイズしてくれます。これを指定しないと画像が間伸びしてしまうので必ず指定しましょう。

また、このCSSによるリサイズですがデフォルトでは縦横中央位置でリサイズされるようになっています。これを左上基準でリサイズしたい、左から●%の位置でトリミングしたいというようなこともあると思います。

そんな時は「object-position」プロパティが便利です。%指定で微調整することも可能です。公式サイトを参考に実装してみてください。

related article

2020/02/13 CSS

スクロールバーを非表示にする(各ブラウザ対応)

2021/08/19 CSS

画像を縮小表示させた時に画像がぼやけてしまう問題

2020/03/19 CSS

IEのflex-direction: column;でハマったこと

2020/04/23 CSS

CSSだけでプルダウンメニューを実装する