画像の縦横比を維持しつ、常に自分が設定したアスペクト比でレスポンシブ対応してくれるサムネイルを作る時には、以前までは 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縮小化. 画像と文章を横並びにする方法.     , 続いてCSSです。sectionには余白とボーダーを付けて、画像は左側にfloatさせて、テキストを右側に回り込ませました。, 特徴的なのがsectionに対してafter要素という疑似要素と呼ばれるものを用意し、それに対してclearfix（回り込みを解除すること）しています。, img{ 当エントリーの内容に改良を加えたバージョンを以下のエントリーで公開しています。そちらでは画像だけでは無くテキストやその複合コンテンツもレスポンシブに並べて表示出来るようにしてみました。, 当エントリーは私が過去に公開していたサイトの2つのエントリーを統合して加筆・修正したリライト記事になります。, AMPページでは画像の間隔が空いていませんが、もうAMP対応に関しては「とりあえずエラーが出てなければいいや」くらいにしか思ってませんので、そういうものだと思って下さいませ…, 以前Chromeで画像が縦長になってしまう現象が発生した為、heightにwidthと同じ数式を設定するという何だか釈然としない方法で暫定的に対応しましたが、現在は大丈夫なようなのでCSSからheightを削除しました。もし環境によって画像が縦長になってしまう場合は、imgタグにheight: autoを設定すれば解消出来るかと思います。, 当サイト用のCSSはちょっとだけカスタマイズしてあるので、このまんまというわけではありません…念の為。, 思いっきり崩れているのを発見した方は、お手数ですがコメント欄かお問い合わせフォームからご一報いただけると幸いです。その際は何のデバイスからか、どのブラウザから見たかの記載があるとめっさ有り難いです。, justify-contentを使わなければいい話なんですが、せっかく便利なプロパティなので出来れば使いたいですよね？, 次からはやらかさないようにGoogle ChromeとVivaldiでも確認する事にします。, mixhostと契約したら最初にcPanelから設定しておくといいかもしれない事とか, 初めてWordPressとPHPに触れてからようやく2年目に突入したばかりのヒヨッ子ですが、元システムエンジニアの経験を活かすべく日々奮闘しております。本来の使用言語はCOBOLやPL/Iといったレガシーな言語ですが、古代言語とか言うとなんかスッゴイ魔法とか使えそうな感じもするから不思議。ゲームとギターと音楽（HR/HM）をこよなく愛する色んな意味で極めて残念な人です。, [WordPressプラグイン] WP Plugin Info Cardでテーマとプラグインをカッコよく紹介する, [無料WordPressテーマ] Luxeritasの投稿にアイキャッチ画像の自動表示と適正な画像サイズの設定, [無料WordPressテーマ] STINGER PLUS2 PRO版限定ウィジェットの背景色を変更する, [無料WordPressテーマ] Luxeritasのパララックスヘッダーをカスタマイズしてみた, https://mariaohsaki.com/archives/11747.html, https://unlimitedchaos.net/css-parallel-image-responsive/. この記事で伝えている方法を実践したところ、ただの画像ならうまく横並びの画像になったのですが、画像リンクだと画像のサイズがおかしくなってしまいます。, つまり、下記のような場合でもレスポンシブ時の画像が横並び配置されるようにしたいのですが、ご教示いただければ幸いでございます。, リンクつきの画像ですね、普通によくある使い方なのに言われるまで全く気が付きませんでした…面目ないです、とりあえず画像のみ・リンク付き画像の両方に対応出来るパターンを考えてみましたので、よろしければぜひ試してみて下さいませ。, 前コメントにて「下記のような場合」と、ソースの例を入力したのですが反映されていないようなので、全角で例を示させていただきます。, ＜ｄｉｖ　ｃｌａｓｓ＝”ｉｍｇ－ｆｌｅｘ－２”＞    .img-flex-4 .△△ {width: 24%; height: 24%; そうするとリンクなしの方が飛び出ていってしまいました。, %の数字を大きくすると確かにブラウザ（Chromeとか）によってはおっしゃる通りになるんですよね。リンクありの方はaタグの中に画像があるのでそうならないんだと思いますが、とりあえず24%というのは画像を4枚並べた事を想定しての数字ですから25%以上にすると100%を超えてしまうので当然はみ出してしまう事になります。, いくつかのテーマで試してみましたが、今のところどれもうまくいってるんですよねぇ…とりあえずもう少し検証してみます。, ご丁寧にお調べくださってまことにありがとうございます。 レスポンシブ、ボックスの横並びについてです。このレスポンシブの横並びの特徴はwidthを設定するだけでデバイスサイズごとにボックスの並ぶ個数を切り替えることができます。このレスポンシブのボックスの横並びはメンテナンス性がいいので扱いやすいと思います。