CSSを使ってサムネイル画像を作る方法

2019年4月28日2020年1月11日HTML・CSS

前回画像を一括削除できるプラグインと異なるサイズの画像を作成されないようにする方法を書きました。

これでフルサイズ(元画像)のみ作成できるようになりました。

でも…

と思うこともあります。

でも画像編集ツールなどを使ってトリミングしたり、設定を戻して他のサイズを作成できるようにしてしまえば「不要な画像」が増えてしまいます。

なので今回は『CSSを使ってサムネイル画像を作る方法』をご紹介します。

width、height

iwidthとheightの数値を変えれば縮小できます。

img {
      width:横幅;
      height:高さ;
}

ですが、img内のwidth、heightで大きさを指定する場合、縦横比を変えてしまうと画像が潰れてしまいます。

画像サイズを簡単に調べられるツールもあるので利用してみてください。

ただし、width、heightで指定するとサイズは固定されてしまうので指定したサイズによってはモバイル端末などの小さい画面で見ると画面からはみ出してしまいます。

綺麗なサムネイルを作る

widthとheightだけでは縦横比を変えてしまうと潰れてしまいます。
潰れないようにサイズを計算したり調べるのもちょっと面倒ですよね。

でもCSSを1行追加するだけで縦横比を気にせず綺麗にサムネイルを作れる方法があります。

これは上のwidth、heightで潰れてしまったものに今から紹介するCSSを追加したものです。

今から紹介するCSSを1行追加するだけで潰れずに指定したサイズで表示することができます。

object-fit

object-fitは、画像のトリミング表示によく使われるプロパティです。

• fill
  指定したサイズに合わせて縦横比を維持しないでリサイズして全体を表示させる(初期値)
• contain
  指定したサイズに合わせて縦横比を維持したままリサイズして全体を見えるように表示する(いい替えれば画像を縮小して指定したサイズ内に表示)
• cover
  指定したサイズに合わせて縦横比を維持したままリサイズしてトリミングして表示する
• none
  リサイズしないでボックスサイズにトリミングして表示(いい替えれば画像サイズのまま指定したサイズに表示)
• scale-down
  要素(画像などと)指定したサイズの小さい方に合わせて縦横比を維持したままリサイズして全体を見えるように表示する

先程のサンプルに object-fit:cover; を追加したんです。

img {
      width:250px;
      height:250px;
      object-fit:cover;
}

これだけで綺麗なサムネイルを作ることができるんです。

レスポンシブ対応にする

最初のwidthとheightでも書きましたが、『width』『height』で指定するとサイズは固定されてしまいます。
指定したサイズによってはモバイル端末などの小さい画面で見ると画像が画面からはみ出してしまいます。

なので小さい画面でも綺麗に収まるようにレスポンシブ対応にしてみたいと思います。

パーセント(%)で指定する

widthの値をpx(ピクセル)で指定するのではなく、％(」パーセント)で指定することレスポンシブ対応にできます。

img {
      width:100%;
      height:250px;
      object-fit:cover;
}

widthを100％で指定して、heightを250pxで指定してみました。

例えば、widthを50%で指定した場合

パソコンなどの大きい画面では⬆︎このように表示されますが、スマホでは↓のようになります

細かいサイズ指定ができるようにしてみた！

「もう少し上手く指定できないかな？」と思い考えてみました。

そして以下のようにしてみました。

<div class="thumbnail-box">
    <img src="画像のURL">
</div>

.thumbnail-box {
      margin:20px auto;
      padding:0;
      max-width:550px;  /*横幅の最大値;*/
}

.thumbnail-box img {
      width:100%;
      height:250px;
      object-fit:cover;
}

ボックスを作ってボックスにmax-widthで最大幅を指定して、imgの横幅をボックスいっぱいに表示されるようにしてみました。

max-widthで大きな画面での表示サイズが指定します。

これで大きい画面では自分の好きな大きさで、小さい画面は画面に合わせて表示されます。

表示位置を変える

object-fitを使うとフォーカスはじどいで中央に当てられます。
指定したサイズや画像によってはフォーカスの位置を変えたい思うこともあります。

実際、私もここまで説明するのにいくつかサンプルを表示して、前の項で表示したサンプルでは右のわんちゃんの顔が欠けてしまったので見えるように位置をずらしています。

フォーカスを変えるためにCSSを1行追加します。

object-positionの指定は左右と上下を半角スペースで区切り%やピクセルで指定します。
初期値はは50% 50%です。

中央

フォーカスを中央にする場合は、object-position:50% 50%; となりますがこれが初期値となるのでobject-positionは入れなくてもOKです。

左上

img {
      width:250px;
      height:250px;
      object-fit:cover;
      object-position:0 0;
}

右下

img {
      width:250px;
      height:250px;
      object-fit:cover;
      object-position:100% 100%;
}

※サンプル表示が左上と左下、右上と右下の違いがないため、「左下」と「右上」のサンプルは省かせていただきます。

object-position:0 100%;左下
object-position:100% 0;右上

左と上が「0」、右と下が「100%」となるのでこの数値を替えれば好きな位置にフォーカスを当てることができます。

最後に

今回は『CSSを使ってサムネイルを作る方法』について書いてみました。
この方法なら元画像を使ってCSSでサムネイルを作るので画像が増えることもありません。

あとはaタグで画像やページへのへのリンクをつければ画像を拡大表示させたりページへジャンプすることができます。

CSSもそれほど難しくないのでぜひやってみて下さい。