1. suin

    Posted

    suin
Changes in title
+CSSだけで画像の縦横比を維持したサムネイルを表示する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,84 @@
+
+サムネイルを表示するときに、サーバサイドプログラムで画像の縦横を計算してサムネイル画像を作ることがあります。しかし、場合によってはCSS3でサムネイル画像を描画したほうが実装コストが低い場合があります。ここでは、CSS3を使ってサムネイル画像をキレイに描画する方法を紹介します。
+
+# 1. 内接・外接とは?
+
+画像の変形方法はいろいろありますが、ここでは内接リサイズ・外接リサイズについてのみ紹介します。内接リサイズ・外接リサイズとは、画像の縦横比を維持したまま、枠のサイズにフィットするように画像のサイズを変更する描画方法です。印刷出版系の用語だそうです。
+
+| 内接リサイズ | 外接リサイズ |
+|:------------:|:------------:|
+| 画像の長辺を枠に合わせ画像全体が枠内に収まるようにリサイズする。 | 画像の短辺を枠に合わせてリサイズする。枠からはみ出す部分はカットされる。 |
+| ![inside] | ![outside] |
+
+# 2. CSSでの実装
+
+CSS3で追加された `background-size` プロパティを使います。このプロパティは、IE9+, Firefox 4+, Opera, Chrome, Safari 5+で動作します。IE8以下などの古いブラウザでは、リサイズされませんので、そういったブラウザには別途対応が必要になります。
+
+以下は、横長と縦長のサンプル画像です。これをCSSでリサイズしてみます。
+
+| 横長.jpeg | 縦長.jpeg |
+|:----:|:----:|
+|![horizontal long] | ![vertically long]|
+
+## 2.1 内接リサイズ
+
+```css
+.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;
+}
+```
+
+```html
+<span class="contain" style="background-image: url('./横長.jpeg')"></span>
+<span class="contain" style="background-image: url('./縦長.jpeg')"></span>
+```
+
+### 2.1.1 描画結果
+
+![contain]
+
+
+## 2.2 外接リサイズ
+
+```css
+.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;
+}
+```
+
+```html
+<span class="cover" style="background-image: url('./横長.jpeg')"></span>
+<span class="cover" style="background-image: url('./縦長.jpeg')"></span>
+```
+
+### 2.2.1 描画結果
+
+![cover]
+
+## 3 まとめ
+
+CSS3の `background-size` プロパティを使うとプログラムレスで画像の内接リサイズ・外接リサイズできるということを説明しました。サーバサイドで画像をリサイズしないので、画像の転送量は元画像と同じになってしまいますが、プロダクトのモックアップや初期リリース段階など、ベロシティが要求される場面で使ってみてはいかがでしょうか。
+
+[inside]: https://dl.dropbox.com/u/949822/qiita.com/130220-css-resize/01.png
+[outside]: https://dl.dropbox.com/u/949822/qiita.com/130220-css-resize/02.png
+[horizontal long]: https://dl.dropbox.com/u/949822/qiita.com/130220-css-resize/03.jpeg
+[vertically long]: https://dl.dropbox.com/u/949822/qiita.com/130220-css-resize/04.jpeg
+
+[contain]: https://dl.dropbox.com/u/949822/qiita.com/130220-css-resize/05.png
+[cover]: https://dl.dropbox.com/u/949822/qiita.com/130220-css-resize/06.png