画像とレスポンシブデザインの相性はあまりよくありません。最適なサイズで見せたいと思ってもパーセントで指定せざるを得ないですし、テキストのように自由に改行ができる訳でもありません。特に写真をメインにしたサイトでは悩みのタネでしょう。 そこで使ってみたいのがSmartPhoto.jsです。特にモバイルデバイスに最適化されたレスポンシブなイメージビューワーです。

SmartPhoto.jsの使い方

こちらはPCサイズの場合。

こちらはスマートフォン。写真のサイズはあまり変わっていません。

そして横スクロールで写真を切り替えられます。

SmartPhoto.jsは写真のサイズを変えずに横スクロール化することでスマートフォンなどの小さな画面でも見やすい状態を保っています。レスポンシブなデザインだとついPCと同じ情報を一つの画面サイズに押し込んでしまいがちですが、スクロールをうまく使えば解決できそうです。

SmartPhoto.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

SmartPhoto.js appleple/SmartPhoto: The most easy to use responsive image viewer especially for mobile devices