ResponsifyJSで応答性の高い画像を簡単に作成

最新のWebは100％応答可能であるべきであり、より新しいライブラリはこれをますます可能にしている.

のような無料のプラグイン付き ResponsifyJS, Webサイトをすべてのデバイスで機能させるのはさらに簡単です。この 無料のjQueryプラグイン 画像のコンテナを取ります 動的にそれらを並べ替える さまざまな画面サイズに基づく.

別の容器から イメージを異なる方法で保持する, 彼らは非常に奇妙な方法でサイズを変更することができます。時々、あなたは人々の写真を持っていて、モバイルでリサイズすると顔が途切れることがあります.

Responsifyプラグインは、この問題を解決するために作成されました。自動的に機能しますが、本当の魔法は 自分のフォーカス領域を定義する 絵の上.

それを使用します 10進表記の内部システム 画像の焦点がどこにあるべきかを見つけるため。たとえば、 位置を定義する といった データフォーカストップ どっち “ブロックイン” 画像の特定の部分.

このデータを渡す必要があります 小数の形で, たとえば、10進数の0.5は、画像の50％（左/右または上/下）をターゲットにしています。当然、これは自分でやるのはかなり混乱します。しかし、あります 無料Responsifyアプリ それはあなたをすることができます 動的に位置を計算する あなたのブラウザで.

写真をアップロードし、フォーカス領域を定義してから、イメージコードをコピーしてWebサイトに貼り付けるだけです。 Responsifyプラグインには、小さい画面で画像のサイズを正しく変更するために必要なすべてのデータが含まれています。.

あなたはかなりの数を見つけることができます ライブデモリンク GitHubリポジトリで、あなたのサイトにコピー＆ペーストするためのコードスニペットを含む.

このプラグインはすべてのプロジェクトにとって完璧なソリューションではありません。時々、あなたは 欲しいです 固定焦点領域なしでサイズ変更する画像。しかし、あなたが使っているなら jQueryを使った石積みグリッド ResponsifyJSをスタックに追加しても問題ありません。.

詳細については、ライブデモ、ダウンロードリンク、およびフルセットアップガイドについては、プラグインのホームページを参照してください。.