【初心者でもわかる】CSSで縦横比を固定したまま画像を正方形にトリミングする3つの方法

どうも7noteです。縦横比固定したまま正方形にトリミングする方法の解説

画像は予めトリミングされていればいいのですが、WordpressなどのCMSを使っていたり、デザインの都合上元画像が長方形しか用意できない場合なんかもあります。

そんなときにCSSで縦横比を固定したまま、画像を正方形にトリミングできる方法を3つ紹介します。

object-fit: cover;を使って正方形にトリミング（IE非対応）

index.html

<div class="photo"><img src="sample.jpg" alt="写真"></div>

style.css

.photo {
  width: 200px; /* 正方形の横幅 */
  height: 200px;/* 正方形の高さ */
}

.photo img {
  width: 100%;  /* 表示したい範囲(100%) */
  height: 100%; /* 表示したい範囲(100%) */
  object-fit: cover; /* 画像をトリミング */
}

結果

解説

object-fit: cover;を使えば、一発でトリミングが可能です。画像(img)の親要素に縦横の幅を指定して、子要素のimgではwidth: 100%;とheight: 100%;、そしてobject-fit: cover;を指定するだけで簡単にトリミングすることができます

また、object-position: center top;のように書くことで、トリミングする基準値を決めることができます。

※IE非対応なので、一般公開するサイトとしてIEにも対応させる必要がある場合は違う方法を取るか、既存のIEにも対応させるjsを読み込む必要があります。

詳しくは過去の記事のコメントをご覧ください→こちら

object-fitを使わずに画像を正方形にトリミング

index.html

<div class="photo"><img src="sample.jpg" alt="写真"></div>

style.css

.photo {
  width: 200px; /* 正方形の横幅 */
  height: 200px;/* 正方形の高さ */
  position: relative; /* 基準位置とする */
  overflow: hidden;   /* はみ出た分を非表示 */
}

.photo img {
  position: absolute; /* 相対位置とする */
  top: 50%;           /* 上から50%の位置 */
  left: 50%;          /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 画像のサイズの半分だけ位置を戻す */
}

結果

※元の画像サイズのまま一部を切り抜いてるので、coverのような切り抜きにするなら以下のようにimgタグに高さ、もしくは幅に100%を指定する必要がある。

style.css

/* 以下も追加したらcoverみたいになる */
.photo img {
  width: auto;
  height: 100%;
}

短く書ける、imgタグを使わず背景画像として正方形にトリミング

index.html

<div class="photo"></div>

style.css

.photo {
  width: 200px; /* 正方形の横幅 */
  height: 200px;/* 正方形の高さ */
  background: url(sample.jpg) center center / cover; /* 背景画像を設定 中央に配置し、幅高さいっぱいに表示 */
}

結果

まとめ

3つの方法を紹介しましたが、imgタグとして利用したいのであれば①つ目の方法。imgでIEにも対応させたいのであれば②の方法。
あまり制限はないので、簡単に作りたいなら③の方法がオススメかなと思います。

どの方法でもほぼほぼ同じことができるので、すきな方法を使ってみてください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ