Help us understand the problem. What is going on with this article?

【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する

More than 3 years have passed since last update.

サムネイルを表示するときに、サーバサイドプログラムで画像の縦横を計算してサムネイル画像を作ることがあります。しかし、場合によってはCSS3でサムネイル画像を描画したほうが実装コストが低い場合があります。ここでは、CSS3を使ってサムネイル画像をキレイに描画する方法を紹介します。

1. 内接・外接とは?

画像の変形方法はいろいろありますが、ここでは内接リサイズ・外接リサイズについてのみ紹介します。内接リサイズ・外接リサイズとは、画像の縦横比を維持したまま、枠のサイズにフィットするように画像のサイズを変更する描画方法です。印刷出版系の用語だそうです。

内接リサイズ 外接リサイズ
画像の長辺を枠に合わせ画像全体が枠内に収まるようにリサイズする。 画像の短辺を枠に合わせてリサイズする。枠からはみ出す部分はカットされる。
inside outside

以下は、横長と縦長のサンプル画像です。これらをCSSでリサイズしてみます。

横長.jpeg 縦長.jpeg
horizontal long vertically long

2. background-sizeを使った実装

CSS3で追加された background-size プロパティを使います。このプロパティは、IE9+, Firefox 4+, Opera, Chrome, Safari 5+で動作します。

background-sizeのブラウザ対応状況 Can I use... Support tables for HTML5, CSS3, etcより

can-i-use-background-size

2.1 内接リサイズ

.contain {
    display: inline-block;
    background-color: #ccc;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 5px;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background-size: contain;
}
<span class="contain" style="background-image: url('./横長.jpeg')"></span>
<span class="contain" style="background-image: url('./縦長.jpeg')"></span>

2.1.1 描画結果

contain

2.2 外接リサイズ

.cover {
    display: inline-block;
    background-color: #ccc;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 5px;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background-size: cover;
}
<span class="cover" style="background-image: url('./横長.jpeg')"></span>
<span class="cover" style="background-image: url('./縦長.jpeg')"></span>

2.2.1 描画結果

cover

3. object-fitを使った実装

background-sizeは背景画像を使った一種のハックでしたが、CSS3ではobject-fitという画像のサムネイル表示にぴったりなプロパティが追加されています。しかし、IEやEdgeが対応待ちになっているので、IE/Edgeをサポートするサイトで今すぐ使うのは難しいかもしれません。

object-fitのブラウザ対応状況 Can I use... Support tables for HTML5, CSS3, etcより
can-i-use-object-fill

とはいえ、IE/Edgeが対応すれば、background-sizeよりもシンプルなCSSになるので、object-fitの実装方法も紹介したいと思います。

3.1 内接リサイズ

.contain {
  object-fit: contain;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border: 1px solid #ccc;
}
<img src="横長.jpeg" class="contain">
<img src="縦長.jpeg" class="contain">

このCSSをCodePenで試す

3.1.1 描画結果

contain

3.2 外接リサイズ

.cover {
  object-fit: cover;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border: 1px solid #ccc;
}
<img src="横長.jpeg" class="cover">
<img src="縦長.jpeg" class="cover">

このCSSをCodePenで試す

3.2.1 描画結果

cover

4. まとめ

CSS3の background-size プロパティや object-fit プロパティを使うとプログラムレスで画像の内接リサイズ・外接リサイズできるということを説明しました。サーバサイドで画像をリサイズしないので、画像の転送量は元画像と同じになってしまいますが、プロダクトのモックアップや初期リリース段階など、ベロシティが要求される場面で使ってみてはいかがでしょうか。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away