【CSS】画像がぼやけないようにアスペクト比を維持させる方法

imgタグで貼り付けた画像が潰れた感じになったり、縦に伸びたり、ぼやけて表示されたりして崩れて表示されてしまう事は僕が勉強を開始して間もないときよくありました。

今回は

縦横比を維持させて画像が崩れないようにする方法
画像をレスポンシブに対応させ画面内におさめる方法

を紹介したいと思います。

縦横比を維持させて画像が崩れないようにする方法

縦横比を維持させたい場合はimgタグにwidth: 100%; height: auto;と記述すれば画像の比率をくずさないで表示されます。

See the Pen img by teru (@teru241546) on CodePen.

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <title>TERUCODE</title>
</head>
<body>

  <header>ヘッダー</header>

  <div class="img-container">
    <img src="https://drive.google.com/uc?export=view&id=1P-glfmH6IRpuJyjBN9OqVEnaWtT5rM2H" alt="トップイメージ">
  </div>

  <section>
    <h2>見出し</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </section>

  <section>
    <h2>見出し</h2>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </section>
  
</body>
</html>

CSS

/* リセットCSS */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    list-style: none;
}
/* ここまでリセットCSS */

header {
  height:100px;
  line-height: 100px;
  text-align: center;
  font-size: 40px;
}


section {
  margin: 80px 0;
}

h2 {
  font-size: 40px;
  text-align: center;
  margin: 40px 0;
}


/* imgを囲っている要素 */
.img-container {
  max-width:600px;
  margin: 0 auto;
}

/* 画像 */
img {
width: 100%;
height: auto;
}

使用している画像の大きさは横1800px、縦1200pxの縦横比3:2です。

imgを<div>で囲い、横幅をmax-width:600px;に指定し、ブラウザ幅600pxより上の場合は600pxで、それ以下は画面幅いっぱいの設定にしました。

imgタグはwidth: 100%; height: auto;とすることでPCなどブラウザ幅600pxより上の場合は横600px、縦400pxの縦横比3:2画像を表示させることができ、スマホなど幅600px以下の場合は画面いっぱいの幅で常に縦横比3:2画像を表示させることができます。

そしてmargin: 0 auto;とすることで600pxの画像でも画面中央に配置させています。

imgを囲っている<div>の幅を変えると中の画像の大きさも縦横比を維持したまま変えていくことができます。横幅800pxで800×533の画像、横幅1200pxだと1200×800の画像を表示させることができます。

仮に<div>で囲わずにimgタグにwidth: 100%; height: auto;と記述した場合、横幅は<div>より親のタグに左右されます。その親にも横幅の規定などの記述が指定されていなければその画像は縦横比を維持したままブラウザの横幅いっぱいに広がります。

用意した画像が実際に表示するpx幅より大きければ問題ありませんが、極端に小さかったりした場合、画像がぼやけてしまいます。下記にサンプルを用意しました。

See the Pen img2 by teru (@teru241546) on CodePen.

上のサンプルは100×67のサイズの画像使用しました。スマホでこのサイトをご覧になられている方は約3.5倍に、600px以上のブラウザサイズでご覧になられている方は6倍に画像が引き伸ばされてぼやけて見えると思います。これはCSSで定義しているpx数に画像のpx数が足りていないためです。

これを防ぐためには600×400以上の画像を用意する必要があり、「Retina Display」など高画質ディスプレイにはさらにその3倍の1800×1200の画像が必要となります。

imgタグに記述しているwidthとheightの単位をpxをつかって表示させるには少し注意が必要です。

その画像がもっている縦横比の比率を守って記述しないと画像が崩れます。

See the Pen img3 by teru (@teru241546) on CodePen.

上記のサンプルでは同じ画像を使用していますが、1つ目と2つ目でCSSによる画像の大きさの指定方法を変えています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <title>TERUCODE</title>
</head>
<body>
  
  <div class="img-container1">
    <img class="img1" src="https://drive.google.com/uc?export=view&id=1P-glfmH6IRpuJyjBN9OqVEnaWtT5rM2H" alt="トップイメージ">
  </div>

  <div class="img-container2">
    <img class="img2" src="https://drive.google.com/uc?export=view&id=1P-glfmH6IRpuJyjBN9OqVEnaWtT5rM2H" alt="トップイメージ">
  </div>

</body>
</html>

CSS

/* リセットCSS */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    list-style: none;
}
/* ここまでリセットCSS */

/* 1つ目の画像ここから */
.img-container1 {
  max-width:600px;
  margin: 0 auto;
}

.img1 {
width: 100%;
height: auto;
}
/* 1つ目の画像ここまで */

/* 2つ目の画像ここから */
.img-container2 {
  max-width:600px;
  margin: 40px auto 0 auto;
}

.img2 {
width: 600px;
height: 600px;
}
/* 2つ目の画像ここまで */

1つ目の画像にはwidth: 100%; height: auto;、2つ目の画像はwidth: 600px; height: 600px;と指定しました。

結果2つ目の画像が縦に引き伸ばされた形になり、更にブラウザ幅が600pxより小さいと画面から見切れて全体がコンテンツ内に表示され無くなります。これを防ぐためにはCSSにwidth: 100%; height: auto;と指定するか、pxで表示する場合はwidth: 600px; height: 400px;と指定し、縦横比を守りつつCSSでレスポンシブ対応させていく必要があります。