スポンサーリンク

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

2019年4月28日HTML・CSS

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

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

でも…

結耶
通訳

こは小さくサムネイルにしたいなー。

と思うこともあります。

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

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

スポンサーリンク

width、height

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

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

元画像 width: 640px  height: 427px ➡︎ width: 250px  height: 166.8px

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

width: 250px  height: 250px
きらり

きらり

元画像のサイズが…これを横幅を300pxにすると高さは~
結耶

結耶

縦横比を変えないように元画像のサイズから縮小サイズを計算するのは面倒だよね。

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

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

綺麗なサムネイルを作る

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

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

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

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

object-fit

CSS  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%で指定した場合

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

きらり

きらり

縦長にはなったけど一応綺麗に収まってるよ。
結耶

結耶

確かに!でも50%だと画面に対して50%で表示されちゃうからスマホだとちょっと見づらいかな?
私的にはPCはこれでいいけどスマホは横幅を大きくしたいな!

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

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

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

HTML
<div class="thumbnail-box">
    <img src="画像のURL">
</div>
CSS
.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で大きな画面での表示サイズが指定します。

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

きらり

きらり

はーい!質問~!
わざわざボックスを作らなくてもimgのwidthをmax-widthにすればいいんじゃないの?
結耶

結耶

最初私もやってみたけど…適用されずスマホの画面からはみ出しました( ToT )
なのでボックスを作ってボックス側でレスポンシブ対応するようにしてみた!

表示位置を変える

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

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

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

CSS  object-position: 左右 上下;

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もそれほど難しくないのでぜひやってみて下さい。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM