Focal Point: Intelligent Cropping of Responsive Images | Design Shack

これは使える！画像をレスポンシブに切り取るサンプルコード。
ブラウザ幅を小さくした際に、画像も小さくしてしまう、のではなく、元の大きな画像の指定した部分を切り抜いて表示する仕組みが紹介されています。
divのclassにどこから表示するのか？を記述しておくだけで、超簡単に場所を指定できるところもいいです。


ニュース等の画像では、重要な部分以外にも背景などが含まれる場合がありますが、スマホなどでは重要なところを大きく表示したいという事があるかと思います。
そういう時に、これを使えば便利そうですね。

関連エントリ

• レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」
• レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」
• WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」