Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@7note

【初心者でもわかる】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; /* 画像をトリミング */
}

結果

image.png

解説

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%); /* 画像のサイズの半分だけ位置を戻す */
}

結果

image.png

※元の画像サイズのまま一部を切り抜いてるので、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; /* 背景画像を設定 中央に配置し、幅高さいっぱいに表示 */
}

結果

image.png

まとめ

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

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

おそまつ!

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7note
フロントエンジニア5年目。3〜4人ほど後輩の育成経験もあり。HTML・CSS初心者向けにわかりやすい記事を意識して書いていきます!目標毎日更新。自社開発を中心にWEBサイト制作を行っています。約40件のHP制作経験あり。Wordpressで独自テーマの開発などもちょこちょこやってます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?