Pocket

cssのbackgroundプロパティで使用できる「cover」という値は、画像の縦横比を保ったまま背景領域を全て覆うように自動で拡大縮小する便利なプロパティです。
ただ、この値を使うには画像を背景に指定する必要があり、imgタグで画像を配置したい場合は使用できません。そこで今回は、imgタグでも同じ効果を再現できるjQueryを紹介します。

デモはこちら。実際のコードは以下です。

html

css

JS

「中身が空の要素を作りたくない」という時にはとても便利なので、ぜひ使ってみてください!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。