サイトのイメージギャラリーを更新している際、毎回画像を指定のサイズに縮小してサムネイルを作るのが面倒だなと感じましたので
CSSだけで「縦横比を維持したサムネイル画像」を表示する方法を実践してみました。
目次
今回の改修の目的
縦写真や横写真など縦横サイズがばらばらの画像をきっちりサイズを整えて表示させます。
CMSが導入されているサイトに組み込みますので、背景画像での実装ではなく、imgタグをHTMLに記述する方法を前提にします。
サムネイルを作ってみよう
通常の方法（失敗例）
画像の外枠「li」のサイズを指定して、はみ出た部分を「overflow:hidden;」でトリミングする作戦で行きます。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSでサムネイルを表示</title> <!-- Keyword,Description --> <meta name="keywords" content="" > <meta name="description" content="" > <!-- StyleSheet --> <link rel="stylesheet" href="common/styles/style.css"> <!-- JQuery --> </head> <body> <div style="margin-top: 100px;"> <ul> <li><a href="common/images/200x800.png"><img src="common/images/200x800.png" alt=""></a></li> <li><a href="common/images/400x500.png"><img src="common/images/400x500.png" alt=""></a></li> <li><a href="common/images/500x400.png"><img src="common/images/500x400.png" alt=""></a></li> <li><a href="common/images/800x200.png"><img src="common/images/800x200.png" alt=""></a></li> </ul> </div> </body> </html>
CSS
ul {
margin: 0 auto;
width: 1200px;
}
ul li {
float: left;
margin: 20px;
width: 200px;
height: 150px;
overflow: hidden;
}
ul li img {
max-width: 200px;
min-height: 150px;
}
失敗・・・
一番左の縦長の画像は上の方だけ表示されている状況です。
真ん中の2つはまあまあ合格点です。
一番右の横長の画像は横幅が縮まってしまって縦横の比率を維持していません。
他の切り口で試してみる
object-fitプロパティを使う
CSS3ではobject-fitというプロパティが追加されています。
サムネイル表示向きのプロパティですので使わない手はありません。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSでサムネイルを表示</title> <!-- Keyword,Description --> <meta name="keywords" content="" > <meta name="description" content="" > <!-- StyleSheet --> <link rel="stylesheet" href="common/styles/style.css"> <!-- JQuery --> </head> <body> <div style="margin-top: 100px;"> <ul> <li><a href="common/images/200x800.png"><img src="common/images/200x800.png" alt=""></a></li> <li><a href="common/images/400x500.png"><img src="common/images/400x500.png" alt=""></a></li> <li><a href="common/images/500x400.png"><img src="common/images/500x400.png" alt=""></a></li> <li><a href="common/images/800x200.png"><img src="common/images/800x200.png" alt=""></a></li> </ul> </div> </body> </html>
CSS
ul {
margin: 0 auto;
width: 1200px;
}
ul li {
float: left;
margin: 20px;
width: 200px;
height: 150px;
overflow: hidden;
}
ul li img {
object-fit: cover;
width: 200px;
height: 150px;
}
成功！・・・したかにみえました
4つとも縦横比率を維持した状態で中央揃えし、はみ出た部分がトリミングされています。
成功したようにみえました。
しかし、firefoxとGoogleChrome（Safari）では意図した通りに表示されるのですが、IE11とEdgeでは正常に表示されません。
調べてみたところ、IE11とEdgeでは対応待ちのプロパティのようです。
まとめ
少ない工数で大幅に更新作業を短縮できる良い方法だと思ったのですが・・・結果は失敗でした。
一見成功したようにみえたのですが、IE11とEdgeではブラウザが未対応のため正常に表示されませんでした。
せっかくの便利なプロパティなのに対応していないブラウザがあるようでは致命的です。
次回はこの問題をjQueryで解決することが出来ないものか、調べてみたいと思います。
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet02.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet03.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
