ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

そこで使ってみたいのが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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2