SWELL｜画像の拡大表示(ポップアップ)をスマホの幅に合わせるCSS

「画像拡大機能」で拡大させた画像を画面サイズに収めるCSSを紹介します。

SWELLの画像拡大機能のおかげで簡単に画像のポップアップが実現するわけですが、スマホで横長の画像を拡大すると画面からはみ出ます。（ "ポップアップ" ではなく "画像拡大" なので当然の仕様です）

しかし、ギャラリーやカラムブロックの2列表示を多用する場合に「画面に収まる範囲で拡大させたい」と考えることもあると思います。そういう人向けのCSSです。

事前準備

まずはじめに、SWELLの画像拡大機能をONにします。（設定を弄って無ければデフォルトでONになっています）

画像をクリックしても拡大表示されないという人は、以下の項目のチェックを外してください。
（SWELL設定 > 機能停止 > 「投稿画像をクリックで拡大表示する機能」を停止する）

スタイルシート（外観 > テーマエディター > 子テーマのstyle-user.css）、もしくは適用させたいページのCSS用コードに貼り付けて使用してください。

@media only screen and (max-width:599.5px) {
	.lum-lightbox-inner img{
		width:100%;
	}
}

CSSについて説明すると、画面幅がスマホサイズ（600px未満）の場合に拡大画像の幅を100%（デバイス幅）にする、という処理を行っています。widthの値を小さくすれば、画面端の余白を増やしてゆとりを持たせることも可能です。

CSSを貼り付けたら、スマホで挙動を確認しましょう。画像を拡大しても画面内に収まっていれば成功です。