前の記事 ≪:2012年12月7日 管理人のブックマーク
次の記事 ≫:動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラ...

これは使える!画像をレスポンシブに切り取るサンプルコード

2012年12月10日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Focal Point: Intelligent Cropping of Responsive Images | Design Shack

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


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

関連エントリ
関連の記事検索:レスポンシブ, 画像, responsive, jQuery, Web制作
スポンサード リンク

By.KJ : 2012年12月10日 09:04 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)