CSS＋HTMLで画像の表示サイズを変更する方法を3つ紹介

2018 8/15

2018.08.14 2018.08.15

画像を挿入してみたが、サイズが合わずデザインがあまりきれいにならない場合があると思います。

そんなとき、画像自体のサイズを変更して表示する方法もありますが、HTMLとCSSの修正で表示サイズを変更する方法をご紹介します。

修正する場所

具体的にどの画像を変更するかというと、デモページの下の赤枠の部分です。

ちょっと縦に長く、現在は横1160px×縦570pxあります。これを縦300pxにしようと思います。

画像の表示サイズを変更する方法3選と解説

画像の縦サイズを指定する

#headimg img {
  height: 300px;
  width: 100%;
}

このように、縦サイズは height プロパティを使って指定することが出来ます。

横サイズは width というプロパティを使いますが、今回は横幅は元のままでよかったので100%と指定しました。

セレクタを #headimg img としているため、赤枠の画像だけを指定することが出来ます。

#headimg img は、idがheadimgのHTMLタグの子要素にある画像という意味になります。

[btn class=”simple”]サンプル画面はこちら[/btn]

下の画像のように縦幅が小さくなりますが、画像全体が潰れてしまいます。

縦幅が潰れない方法は次に解説します。

画像まわりのブロックサイズを指定する

#headimg {
  height: 300px;
  overflow: hidden;
}

#headimg img {
  margin-top: -150px;
}

これはヘッダ画像まわりの div タグの高さを指定して、その中で画像の配置を調整する方法です。

まず、#headimg に対し、height: 300px; で高さを調整します。

しかし、これだけでは画像がはみ出してしまいます。

そこではみ出した部分を非表示になるように、overflow: hidden; を指定します。

overflow プロパティははみ出した部分をどう扱うかを指定するプロパティで、値に hidden を指定すると非表示になります。

しかしこれでもまだ画像が上半分だけ表示されるような形になってしまいます。

そこで、#headimg img でヘッダの画像を指定し、margin-top: -150px; で上に150px ずらしました。

これは微調整が可能で、-150px の部分を変更することで縦位置を調整できます。

[btn class=”simple”]サンプル画面はこちら[/btn]

画像を表示するエリアの背景に指定する

これはHTMLも現状から修正する必要があります。

※不要なタグは省略しています。

<!doctype html>
<html lang="ja">
  <head></head>
  <body>
    <div id="container">
      <header>
        <div id="logo"></div>
        <div id="headimg">
          <!-- ヘッダ画像をここに定義しない -->
        </div>
      </header>

背景画像はCSSで定義するため、HTMLに定義したヘッダ画像の定義を削除します。

次にCSSで背景画像やその配置について指定します。

#headimg {
  height: 300px;
  background-image: url("./images/uyuni3.png");
  background-position: center center;
  background-repeat:no-repeat;
  background-size:100% auto;
}

height: 300px; は、表示エリアの高さの指定です。

background-image が背景画像を指定するプロパティで、url(“./images/uyuni3.png”) で画像のパスを指定します。

./images/uyuni3.png の部分は、CSSファイルからのパスになります。

絶対パスでも良いですが、上記のように相対パスでも指定できます。

background-position プロパティで背景画像の位置を指定します。

値を center center 縦横中央揃えになります。

background-repeat プロパティは、背景画像をリピートしてたくさん表示するかどうかを指定します。

値を no-repeat とすると繰り返さない設定になります。

何も書かない場合（デフォルト）は、繰り返し表示する repeat になっています。

background-size プロパティは背景画像の幅を指定します。

値の1つ目は横幅で、2つ目は縦幅になります。

値に 100% auto と指定すると、横幅100%で縦は元画像の比率に合わせます。ということになります。