【CSS】画像のサイズ・縦横比・トリミング指定方法（初心者向け）

こんにちは！

「画像の大きさを変えてみたい・・！」 「画像を表示してみたいけど崩れて表示されている・・・」 「画像をトリミングして使用したい・・！」

そんな風に考えてる初心者web制作者の方も多いのではないでしょうか？
思った通りに画像サイズを指定し表示させる事は、制作を行う上で欠かせません。

今回は、初心者の方向けに、「画像のサイズ変更」「画像の縦横比を維持したままの指定方法」「画像のトリミング」を中心に詳しく解説していきます。

画像の指定方法

画像の指定方法は、
imgタグを使い、src属性の中に画像のURL、もしくは、画像のファイル名を指定します。

HTMLサンプルコード

<img src="https://1.bp.blogspot.com/-nvBbTXC-Eso/Vt_t8JRJznI/AAAAAAAA4q8/ZHxJ390lXrI/s400/obentou_building.png">

画像の表示方法についてもっと詳しく知りたい方は、下記を参照にしてみてください。 https://techacademy.jp/magazine/5827

画像の大きさの指定

width・height属性（px）

width（横幅）height（高さ）属性を指定し、値を変える事で画像の大きさを変える事ができます。

HTMLサンプルコード

<img src="https://1.bp.blogspot.com/-nvBbTXC-Eso/Vt_t8JRJznI/AAAAAAAA4q8/ZHxJ390lXrI/s400/obentou_building.png" 
width="600" height="600">

※解説
width（横幅）height（高さ）属性を指定し、お好みの値を指定する事で簡単に画像の大きさを変える事ができます。 値（数字）の後にpxを指定しなければ自動的にpxが付与されます。

width・height属性　値%での指定

width（横幅）height（高さ）属性に値%を指定し画像の大きさを変える事ができます。
%は親要素を基準にした割合の大きさを指定します。

HTMLサンプルコード

<div class="example">
<img src="https://1.bp.blogspot.com/-nvBbTXC-Eso/Vt_t8JRJznI/AAAAAAAA4q8/ZHxJ390lXrI/s400/obentou_building.png">
</div>

CSSサンプルコード

.example {
   width: 300px;
   height: 300px;
   border: solid 1px black;
}
.example img {
   width: 50%;
   height: 50%;
}

※解説
親要素（exampleクラスに）「width 300px」「 height 300px」の大きさが指定されている。
画像（img）は上記の子要素であり、width 50% hight 50%が指定されているので、画像の大きさは、「width 150px」「 height 150px」の大きさで表示される。

画像の比率を維持した画像変更

画像の縦横比とは？

画像の比率とは、画像の縦と横の長さの比率のことです。
下記の画像の場合、画像の大きさが400×400なので、比率は1対1です。

画像の大きさを変更させ表示させたい場合、
縦横の比率が元の画像と違うと、画像の見栄えが悪くなります。
例えば下記のような状態ですね

基本的には、デフォルトで縦横の比率を維持してくれますが、元の画像から大きさを変えた時、間違えたHTML、CSSを記述してしまうと縦横比が維持されません。

画像の縦横比を維持したまま画像の大きさ変更

CSSで横幅だけサイズ指定

HTMLサンプルコード

<div class="example">
  <img src="https://1.bp.blogspot.com/-nvBbTXC-Eso/Vt_t8JRJznI/AAAAAAAA4q8/ZHxJ390lXrI/s400/obentou_building.png">
</div>

CSSサンプルコード

.example img {
   width: 200px;
}

※解説
width（横幅）だけをCSSで指定しいるだけですが、高さはデフォルトで自動的に比率を合わせてくれ表示されます。

CSSだけなら、自動で簡単に比率を守り表示させる事ができますが、HTMLでサイズ指定されていると、 このやり方では上手くいきません。
下記より説明します。

HTMLで横幅、高さが決まっている場合の画像の比率の指定方法

HTMLで画像の大きさが決められている場合は、CSSで横幅だけではなく、高さも指定しなおさなければならない。

<div class="example">
  <img src="https://1.bp.blogspot.com/-nvBbTXC-Eso/Vt_t8JRJznI/AAAAAAAA4q8/ZHxJ390lXrI/s400/obentou_building.png" 
width="300" height="100">
</div>

上記のようにHTMLで画像の大きさが縦、横決められている場合

.example img {
   width: 200px;
}

上記のように、widthだけを指定しても、CSSでwidth部分しか上書きできていないので、高さのheightは、そのままの100pxが設定されます。 下記のような状態です。

この場合、元の画像の大きさは400×400で比率は1対1なので、簡単に計算でき、height=300pxをcssで指定すれば、 下記のように、比率が保たれて表示されます。

HTMLサンプルコード

<div class="example">
  <img src="https://1.bp.blogspot.com/-nvBbTXC-Eso/Vt_t8JRJznI/AAAAAAAA4q8/ZHxJ390lXrI/s400/obentou_building.png" 
width="300" height="100">
</div>

CSSサンプルコード

.example img {
   width: 300px;
   height: 300px
}

※解説
今回は、1対1なので簡単にサイズ比を計算し設定できますが、計算が難しい場合は「auto」を指定すると自動で計算してくれます。

「auto」を指定

HTMLサンプルコード

<div class="example">
  <img src="https://1.bp.blogspot.com/-nvBbTXC-Eso/Vt_t8JRJznI/AAAAAAAA4q8/ZHxJ390lXrI/s400/obentou_building.png" 
width="300" height="100">
</div>

CSSサンプルコード

.example img {
   width: 200px;
   height: auto;
}

※解説
「auto」を指定する事で計算できない箇所に適用、計算ミスも減らす事ができます。
計算可能であっても「auto」で指定するができますので、「auto」の指定がオススメです。

計算できない場合の「auto」の指定

widthに%指定されている場合は、画面幅によって画像の大きさが変わるため、heightの比率を常に計算できません。
heightを「auto」指定する事で自動的に比率を計算して変更してくれます。
下記のような状態です。

サンプルコード動画表示

HTMLサンプルコード

<div class="example">
  <img src="https://1.bp.blogspot.com/-nvBbTXC-Eso/Vt_t8JRJznI/AAAAAAAA4q8/ZHxJ390lXrI/s400/obentou_building.png" 
width="300" height="100">
</div>

CSSサンプルコード

.example {
   background-color: red;
   width: 100%;
   height: 100%;
}
.example img {
   width: 30%;
   height: auto;
}

※解説
親要素はわかりやすく背景色を赤にしました。
親要素、横幅100%に対して、子要素の横幅30%に指定。
ブラウザの大きさにより、横の比率は常に親要素の30%、縦の比率は「auto」を指定しているので、横幅30%の大きさに合わせて自動で比率を表示してくれます。

画像のトリミング（object-fit）

画像のトリミングをCSSプロパティ「object-fit」で行うことができます。
Photoshopを使わずに、画像の縦横比を保ちながらトリミングする事ができます。
例えば、下記のように赤枠の外を切り取り、赤枠の中を表示する事ができます。

object-fit:cover（中央でトリミング）

今回は下記の画像を使用します。

画像サイズ「横幅960px 縦420px」
こちらに
300px 300pxの大きさの正方形に指定
比率が合わないので、下記のように画像が崩れて表示されてしまいます。

ここでobject-fit:coverを指定し、300px 300pxの中央にフォーカスし、トリミングする事ができます。

HTMLサンプルコード

<div class="example">
      <img src="https://cdn.pixabay.com/photo/2018/03/31/06/31/dog-3277414_960_720.jpg">
</div>

CSSサンプルコード

.example img {
   width: 300px;
   height: 300px;
   object-fit:cover;
}

※解説
中央で画像の縦横の比率を維持したまま、トリミングする事ができています。
このように画像比率をそのままに、中央で自動的でトリミングをしてくれるのがobject-fit:coverです。
ちなみに縦横のうち、短い方を基準として、自動で拡大・縮小しボックスからはみ出た部分を切り落としてくれます。

高さを指定・横幅は画面100%

下記画像を指定

上記画像を、横幅100%、高さheight:300pxを指定すると、 下記のような状態です。

しかし画像の縦横の比率が合わないので、画像が崩れてしまいます。
ここでも,object-fit:coverを指定する事で画像の比率を保ちながら、画像を表示する事ができます。

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2013/05/11/20/44/spring-flowers-110671_960_720.jpg">
</div>

CSSサンプルコード

.example img {
   width: 100%;
   height: 300px;
   object-fit: cover;
}

※解説
object-fit:coverを指定する事で、値％、値pxの２つが入っても、縦横の画像比率を綺麗に保ってくれる事ができます。
レスポンシブ 対応もしてくれてとても便利な値です。

画像を好みの位置でトリミングする

画像のトリミングは、中央だけではなく指定した好きな位置で、トリミングする事ができます。
「object-position」プロパティを使い指定する事ができます。

下記画像を指定した位置でトリミングしていきます。

右下にトリミング

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2016/06/17/16/42/roses-1463562_960_720.jpg">
</div>

CSSサンプルコード

.example img{
   width: 300px;
   height: 300px;
   object-fit: cover;
   object-position: 100% 100%;
}

※解説
右下に合わせてトリミングされています。
ポイントは、画像の位置基準は常に左上。
object-positionで指定する値によって、トリミングする箇所を指定、
今回は100%100%を指定しているので、基準左上の真反対、右下にフォーカスされてトリミングされています。

左下にトリミング

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2016/06/17/16/42/roses-1463562_960_720.jpg">
</div>

CSSサンプルコード

.example img{
   width: 300px;
   height: 300px;
   object-fit: cover;
   object-position: 0% 100%;
}

※解説
左下に合わせてトリミングされています。
ポイントは、画像の位置基準は常に左上。
object-positionで指定する値によって、トリミングする箇所を指定、
今回は0%100%を指定しているので、基準左上の真下で左下にフォーカスされてトリミングされています。

pxで指定

値はpxでも指定する事ができます。

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2016/06/17/16/42/roses-1463562_960_720.jpg">
</div>

CSSサンプルコード

.example img{
   width: 300px;
   height: 300px;
   object-fit: cover;
   object-position: 100px 100px;
}

※解説
元の画像を300px 300pxにトリミングし、さらに100px100pxの位置でトリミングする事ができています。このようにobject-positionを使用し「%」「 px」の値を指定する事で、好きな位置でトリミングする事ができます。

写真に余白を作る（object-fit: contain;）

トリミングせずに、あえて余白を作り写真を中央に表示することもできます。
下記のような状態です。

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2016/06/17/16/42/roses-1463562_960_720.jpg">
</div>

CSSサンプルコード

.example img{
   width: 300px;
   height: 300px;
   object-fit: contain;
   border: 2px solid #CCFFFF;
   background: #FFCC66;
}

※解説
object-fit: contain;を使用しています。
containを使用することにより、300px 300pxのボックスに、縦横比を維持した写真を中央に位置してくれます。
長さの長い方に合わせて自動で収めてくれます。

object-fitで使える値

fill（初期値）

ボックス内に収まるように、縦横比の比率は考慮されず画像表示されます。

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2016/06/17/16/42/roses-1463562_960_720.jpg">
</div>

CSSサンプルコード

.example img{
   width: 300px;
   height: 300px;
   object-fit: fill;
   border: 2px solid #CCFFFF;
   background: #FFCC66;
}

contain

縦横比を維持し、ボックス内中央に配置してくれます。
縦横、長さの長い方に合わせて、ボックス内に自動で画像を位置してくれます。

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2016/06/17/16/42/roses-1463562_960_720.jpg">
</div>

CSSサンプルコード

.example img{
   width: 300px;
   height: 300px;
   object-fit: contain;
   border: 2px solid #CCFFFF;
   background: #FFCC66;
}

cover

縦横比を維持し、余白が出ないようにボックス内中央に配置してくれます。 ボックスから出る部分はトリミングされます。

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2016/06/17/16/42/roses-1463562_960_720.jpg">
</div>

CSSサンプルコード

.example img{
   width: 300px;
   height: 300px;
   object-fit: cover;
   border: 2px solid #CCFFFF;
   background: #FFCC66;
}

none

画像の大きさを変えずにそのまま配置されます。

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2016/06/17/16/42/roses-1463562_960_720.jpg">
</div>

CSSサンプルコード

.example img{
   width: 300px;
   height: 300px;
   object-fit: none;
   border: 2px solid #CCFFFF;
   background: #FFCC66;
}

scale-down

ボックスより画像が大きい場合は「contain」を、小さい場合は「none」を指定します。

HTMLサンプルコード

<div class="example">
  <img src="https://cdn.pixabay.com/photo/2016/06/17/16/42/roses-1463562_960_720.jpg">
</div>

CSSサンプルコード

.example img{
   width: 300px;
   height: 300px;
   object-fit: scale-down;
   border: 2px solid #CCFFFF;
   background: #FFCC66;
}

対応ブラウザ

「object-fit」はほとんどのブラウザで対応しているのですが、IE11とEdegeでは対応していません。
こんなに便利なのに残念です。
しかし対応させる方法も何パターンかあります。
詳しく知りたい方は下記を参考にしてみてください。

https://b-risk.jp/blog/2021/01/img_fit/#1object-fit-images

まとめ

今回は、初心者の方向けに、「画像のサイズ変更」「画像の縦横比を維持したままの指定方法」「画像のトリミング」を中心に詳しく解説してきました。

　1.画像のサイズ変更
width（横幅）height（高さ）属性を指定し、値を変える。 値 pxは絶対的な大きさを指定。 値%は相対的な大きさを指定できる。

2.画像の縦横比を維持したまま画像の大きさ変更
　縦横比を自分で計算して値を記入、もしくはCSSでauto指定をし自動計算指定する。

3.画像のトリミング
「object-fit」を使用する。

4.「object-fit」で指定できる値

●fill（初期値）
縦横比の比率は考慮されずに、ボックス内に収まるように、画像表示。

● contain
縦横比を維持し、ボックス内中央に配置。
縦横、長さの長い方に合わせて、ボックス内に自動で画像を配置する。

● cover
縦横比を維持し、余白が出ないようにボックス内中央に配置。
ボックスから出る部分はトリミングされる。

● none
画像の大きさを変えずにそのまま配置。

●scale-down
ボックスより画像が大きい場合は「contain」を、小さい場合は「none」を指定。

5.トリミングする箇所を任意指定
「object-position」を使用する。

いかがだったでしょうか？
画像はほとんどのホームページで使われており、サイズ指定は欠かせません。
本記事を参考にして頂けたら幸いです。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

WordPressでバックアップをとる方法【タイミング/用途別で解説】

バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。

【最短】WordPress（ワードプレス）で問合せフォームを設置する方法

お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。

【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法

今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。

<a href="https://digitor.jp/textbook/css-size-aspect-trimming/">【CSS】画像のサイズ・縦横比・トリミング指定方法（初心者向け）</a>