【超基本】CSSで画像を拡大・縮小(リサイズ)してみよう

2021.09.09
スポンサーリンク

こんにちは、Webプログラマー見習いのトムです。

さて今回はコードを書いてて意外とハマリ易い画像の拡大と縮小（リサイズ）について、CSSでどう書けばどのように動作するのかについて検証してみます。前提として配置する画像は<img>タグで指定します（背景画像ではありません）。またHTML上でサイズ指定は行わず、CSSのみで行っています。

今回のポイント・・・画像の拡大・縮小(リサイズ)は、画像(img)自体に解像度の指定をすることで実現できる。ピクセル指定(px)とパーセント(%)指定が可能。片方向のみの指定では画像の縦横比を維持しつつリサイズする。親要素の影響は限定的。

スポンサーリンク

画像の拡大

まずは画像の拡大をやってみます。元画像として解像度200×100の小さめの画像を用意しました。画像の中心に解像度を示す文字も書かれています。合計で６パターン（imagebox-01～06)の設定を行っており、設定での動作の違いを理解しましょう。

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Image test</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="wrapper">
    <div class="imagebox-00">
      <h3>imagebox-00:元画像(小さめの画像)</h3>
      <img src="https://drive.google.com/uc?export=view&id=17bsHRS6W1xNSStA9RB9u4ufTVVqftkzL">
      <hr>
    </div>

    <div class="imagebox-01">
      <h3>imagebox-01:親要素(div)に解像度(600x200)を指定</h3>
      <img src="https://drive.google.com/uc?export=view&id=17bsHRS6W1xNSStA9RB9u4ufTVVqftkzL">
      <hr>
    </div>


    <div class="imagebox-02">
      <h3>imagebox-02:画像に横の解像度(width:600px)を指定</h3>
      <img src="https://drive.google.com/uc?export=view&id=17bsHRS6W1xNSStA9RB9u4ufTVVqftkzL">
      <hr>
    </div>

    <div class="imagebox-03">
      <h3>imagebox-03:画像に縦横の解像度(width:600px、height:150px)を指定</h3>
      <img src="https://drive.google.com/uc?export=view&id=17bsHRS6W1xNSStA9RB9u4ufTVVqftkzL">
      <hr>
    </div>

    <div class="imagebox-04">
      <h3>imagebox-04:画像に横の解像度(width:100%)を指定</h3>
      <img src="https://drive.google.com/uc?export=view&id=17bsHRS6W1xNSStA9RB9u4ufTVVqftkzL">
      <hr>
    </div>

    <div class="imagebox-05">
      <h3>imagebox-05:画像の縦の解像度(height:200px)を指定</h3>
      <img src="https://drive.google.com/uc?export=view&id=17bsHRS6W1xNSStA9RB9u4ufTVVqftkzL">
      <hr>
    </div>
    
    <div class="imagebox-06">
      <h3>imagebox-06:画像に横の解像度(width:100%, height:1000px)を指定</h3>
      <img src="https://drive.google.com/uc?export=view&id=17bsHRS6W1xNSStA9RB9u4ufTVVqftkzL">
      <hr>
    </div>

  </div>

</body>

</html>

CSS

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  font-family: "Meiryo", "sans-serif";
  background-color: white;
}

.wrapper {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
}

.imagebox-01 {
  width: 600px;
  height: 200px;
}

.imagebox-02 img {
  width: 600px;
}

.imagebox-03 img {
  width: 600px;
  height: 150px;
}

.imagebox-04 img {
  width: 100%;
}

.imagebox-05 img {
  height: 200px;
}

.imagebox-06 img {
  width: 100%;
  height: 1000px;
}

初期費用無料、月額990円から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

実行結果

See the Pen image_scaling_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

画像の拡大　コーディングのポイント

コードの前提として、サイト全体をwrapperクラスでセンタリングしています(CSSでmax-width:768px、margin:0 autoと指定している箇所）※codepenのサイズを”0.5x”に指定して頂くとセンタリングしているのが分かります

imagebox-00は元画像を配置しただけですが、配置される位置は親の親要素であるwrapperクラスの影響を受けており、センタリングされた領域の左端と画像の左端が同じ位置になります。

imagebox-01:親要素(div)に解像度(600×200)を指定・・・ 画像の解像度は全く変化していません。やはり画像に直接解像度の指定をしない限り、親要素の幅や高さは画像の大きさには無関係ということが分かります。

imagebox-02:画像に横の解像度(width:600px)を指定・・・ポイントは画像が拡大されているのと同時に、画像の縦横比が維持されている点です。画像のwidthのみ指定すると高さ(height)は画像の縦横比を維持しながら自動的に拡大します。ちなみに”height:auto”と指定しても同じ動作になります。

imagebox-03:画像に縦横の解像度(width:600px、height:150px)を指定・・・元画像の縦横比(2:1)を4:1に変えていますが、文字が縦につぶれていることからもわかる通り、指定の通り画像が拡大しています。

imagebox-04:画像に横の解像度(width:100%)を指定・・・画像の横幅は親の親要素であるwrapperのmax-widthである768pxに一致します。このように画像の横幅をパーセントで指定した場合、imagebox-01の動きとは異なり親要素の幅の影響を受けるようになります。また縦方向には何も指定していないため画像の縦横比が維持されています。

imagebox-05:画像の縦の解像度(height:200px)を指定・・・結果を見ると文字がつぶれていませんから縦横比を維持しつつ画像が拡大しています。imagebox-02,04,05の結果から、画像の片方向のみサイズ指定すると、画像の縦横比が維持されながらリサイズすることが分かります。

imagebox-06:画像に横の解像度(width:100%, height:1000px)を指定・・・画像の横幅をパーセント指定、縦をピクセル指定という混在指定をしています。結果は文字が縦に引き伸ばされている点からもわかる通り、横幅はwrapperと同じ768px、縦は指定通りの1000pxに拡大しています。

東証スタンダード上場企業の就職後支払いが可能な開発エンジニアスクール【IT道場】

スポンサーリンク

画像の縮小

今度は画像の縮小です。 元画像として解像度3000×1000の大き目の画像を用意しました。画像の中心に解像度を示す文字も書かれています。以下にコードを記載しますが元画像が異なる点以外は、先ほどの縮小の場合と全く変更の指定(imagebox-01～06)をしています（元画像が巨大なので、先と同じ指定により縮小させることになります）

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Image test</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="wrapper">
    <div class="imagebox-00">
      <h1>imagebox-00:元画像(3000x1000)</h1>
      <img src="https://drive.google.com/uc?export=view&id=1_wFrrnMBK_kZMNLsZCmWP4iGbvZL2PU2">
      <hr>
    </div>

    <div class="imagebox-01">
      <h1>imagebox-01:親要素(div)に解像度(600x200)を指定</h1>
      <img src="https://drive.google.com/uc?export=view&id=1_wFrrnMBK_kZMNLsZCmWP4iGbvZL2PU2">
      <hr>
    </div>


    <div class="imagebox-02">
      <h1>imagebox-02:画像に横の解像度(width:600px)を指定</h1>
      <img src="https://drive.google.com/uc?export=view&id=1_wFrrnMBK_kZMNLsZCmWP4iGbvZL2PU2">
      <hr>
    </div>

    <div class="imagebox-03">
      <h1>imagebox-03:画像に縦横の解像度(width:600px、height:150px)を指定</h1>
      <img src="https://drive.google.com/uc?export=view&id=1_wFrrnMBK_kZMNLsZCmWP4iGbvZL2PU2">
      <hr>
    </div>

    <div class="imagebox-04">
      <h1>imagebox-04:画像に横の解像度(width:100%)を指定</h1>
      <img src="https://drive.google.com/uc?export=view&id=1_wFrrnMBK_kZMNLsZCmWP4iGbvZL2PU2">
      <hr>
    </div>

   <div class="imagebox-05">
      <h3>imagebox-05:画像の縦の解像度(height:200px)を指定</h3>
      <img src="https://drive.google.com/uc?export=view&id=1_wFrrnMBK_kZMNLsZCmWP4iGbvZL2PU2">
      <hr>
    </div>

    <div class="imagebox-06">
      <h3>imagebox-06:画像に横の解像度(width:100%, height:1000px)を指定</h3>
      <img src="https://drive.google.com/uc?export=view&id=1_wFrrnMBK_kZMNLsZCmWP4iGbvZL2PU2">
      <hr>
    </div>
  </div>
  
  
</body>

</html>

CSS

@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  font-family: "Meiryo", "sans-serif";
  background-color: white;
}

.wrapper {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
}

.imagebox-01 {
  width: 600px;
  height: 200px;
}

.imagebox-02 {
  margin-top: 1000px;
}

.imagebox-02 img {
  width: 600px;
}

.imagebox-03 img {
  width: 600px;
  height: 150px;
}

.imagebox-04 img {
  width: 100%;
}

.imagebox-05 img {
  height: 200px;
}


.imagebox-06 img {
  width: 100%;
  height: 1000px;
}

【早い者勝ち！】.com／.net／.jp　ドメイン取るならお名前.com

実行結果

See the Pen image_scaling_02 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

【早い者勝ち！】.com／.net／.jp　ドメイン取るならお名前.com

画像の縮小　コーディングのポイント

コードの前提として、拡大時と同じくサイト全体をwrapperクラスでセンタリングしています(CSSでmax-width:768px、margin:0 autoと指定している箇所） ※codepenのサイズを”0.5x”に指定して頂くとセンタリングしているのが分かります

先にコーディングのポイントについての結論をお伝えすると、拡大の時と同じ動作になります。

imagebox-00は元画像を配置しただけですが、やはり配置される位置は親の親要素であるwrapperクラスの影響を受けており、センタリングされた領域の左端と画像の左端が同じ位置になります。 また親の親クラスであるwrapperクラスの横幅は元画像よりも小さいですが、画像には何の影響も与えていません。

imagebox-01は直接の親要素であるimagebox-01クラスに幅と高さを指定しましたが、画像の解像度は全く変化していません。やはり画像に直接解像度の指定をしない限り、親要素の幅や高さは画像の大きさには無関係ということが分かります。

imagebox-02:画像に横の解像度(width:600px)を指定・・・ 画像が縮小されているのと同時に、画像の縦横比は維持されています。画像のwidthのみ指定すると、高さ(height)は画像の縦横比を維持しながら自動的に縮小します。

imagebox-03:画像に縦横の解像度(width:600px、height:150px)を指定・・・元画像の縦横比(3:1)を4:1に変えていますが、文字が縦につぶれていることからもわかる通り、指定の通り画像が縮小しています。

imagebox-04:画像に横の解像度(width:100%)を指定・・・画像の横幅は親の親要素であるwrapperのmax-widthである768pxに一致します。 拡大の時と同じく、画像の横幅をパーセントで指定した場、親要素の幅の影響を受けるようになります。 またこの場合も画像の縦横比は崩れていません。

imagebox-05:画像の縦の解像度(height:200px)を指定 ・・・結果を見ると文字はつぶれていませんから、縦横比を維持しつつ画像が縮小していることが分かります。imagebox-02,04,05の結果から、画像の片方向のみサイズ指定すると、画像の縦横比が維持されながらリサイズすることが分かります。

imagebox-06:画像に横の解像度(width:100%, height:1000px)を指定 ・・・画像の横幅をパーセント指定、縦をピクセル指定という混在指定をしています。結果は文字が縦に引き伸ばされている点からもわかる通り、横幅はwrapperと同じ768pxに縮小されています。

以上、画像の拡大・縮小（リサイズ）について解説しました！

ブログを始めるなら国内シェアNo.1のエックスサーバー

タイトルとURLをコピーしました