画像の縦横比を維持しつ、常に自分が設定したアスペクト比でレスポンシブ対応してくれるサムネイルを作る時には、以前までは JQuery を利用しなければなりませんでした。, しかし最近の CSS 3 は大したもので、CSS だけでそれが可能になってしまうのですっ!, 今回は「CSS だけで画像の縦横比を維持しながら設定したアスペクト比で画像を伸縮(レスポンシブ対応)できるサムネイルを作る方法」を紹介します。, WordPress のアイキャッチサムネイルみたいにな感じで、画像中央を抜き出して、縦横比を維持しつつ、自分が設定した任意のアスペクト比のままレスポンシブ対応のサムネイルを作れる CSS です。, 例えば 16:9 で設定したサムネイルは、画面が小さくなろうと大きくなろうと 16:9 のまま縮小拡大します。今までの CSS 2 ではこれができなかったんですねぇ。, Javascript を使わずに CSS だけでこれができることが、どれほど便利なことか・・・ウェブサイト制作に携わる方ならわかっていただけるはず!!, 実際に動いているデモページを確認してみてください。デモページはレスポンシブ OK なので画面狭めたりして、縦横アスペクト比を確認してみてください。, しかし、これだと縦写真は長くなるし、4:3 や 16:9 とアスペクト比が違う写真があればデコボコしてしまいます。不都合だらけ。, どんな写真でもサムネイルは枠の大きさを 16:9 と決めたら 16:9 で表示してくれないと困ります。対象の写真が縦だろうと正方形だろうと 16:9 で表示させたいのです。, 縦写真でも横写真でもどんなアスペクト比でもサムネイルが常に 16:9 になる方法です。, サムネイルになる部分へは、画像(img タグ)ではなく、style で background-image を指定し、背景として画像を設置します。, bacground-size を「cover」にすると、どんな状況でも、親ボックス内に表示される画像が、設定した backgroud-position に合わせて切り抜かれ、目一杯広がってはいります。入り切らない部分は自動的にオーバーフロー(切り捨て)されます。, bacground-position は center center と設定しているので、画像は上下左右の中央で抜き出されます。これを top center とすれば、画像は上の中央で抜き出されます。, 通常、縦幅を設定するには height を使いますが、height だと px で縦幅を設定しなければならず、パーセントのような比率維持の単位が使えません。, しかし、padding-top なら height と違ってパーセントで縦幅を設定できますから都合が良いのです。ただ、それだと画像を HTML に img タグで設置するわけにはいきません。そこで背景として画像を設置するわけです。, padding-top の値 56.25% はアスペクト比 16:9 の縦幅設定です。width が 100% なので、画面の幅がどれだけ動いても常に 16:9 のアスペクト比を維持してくれるというわけです。, 例えば、サムネイルを 4:3 にしたければ、padding-top を 75% にすれば OK です。, padding-top に使いたいアスペクト比の値を記述することで、任意のサイズに設定できることはわかったと思います。, では、4:3 や 8:5 などアスペクト比をパーセントへ変換するにはどのように計算すればよいのでしょうか?, サムネイルとして使うからには、リンクを挿入したり、ボーダーと画像間に余白をいれて写真風に見せたりしたいですよね。応用編です。, 親要素と画像の間に余白を挿入したい場合は、margin をパーセントで設定して、設定した数値分だけ width から引きます。ここでは margin 1.5% ですから、左右分を合わせて 3%を width から引いて 97% という感じです。, ついでに、リンクの a:hover に透過の opactiy でもいれとけば、マウスオーバーのアクションまで付いちゃうのでお得です。, CSS 3 の background-image と background-size のコンボを利用した、画像の縦横比とアスペクト比を維持したサムネイル作成方法を紹介しました。, この CSS サムネイルレイアウトは、レスポンシブ時代の昨今では本当に重宝します。, 軽くて便利なコードエディタ「Visual Studio Code」の日本語化手順を紹介します, 他のブログやサイトのインデックス数や利用サーバー等を簡単に調べることができる便利なサービスを紹介, 本ブログ(月間200万PV達成)は、主題でパソコン・スマホ・デジモノ、副題で旅行・カメラなど、専門分野と趣味の情報を合わせて発信しています。
clear: both;
WordPress Luxeritas Theme is provided by "Thought is free". タイトルのまんまですがやられました…私とした事がやられてしまいました。クレカの登 ... [WordPressテーマ] Cocoonの追加CSSがリアルタイムで反映されない原因はCSS縮小化. 画像と文章を横並びにする方法.