均等な大きさのサムネイルの中にいろんな画角の画像をピッタリ表示させる | 12px.com

商品写真やプロフィール写真などの一覧ページで、DBから引っ張ってきた縦長横長どちらかわからない画像を全て同じ矩形内にピッタリ表示を揃えたい場合、案外面倒ですよね・・・ 最近これが必要な案件が立て続けにあったので後々楽できるようにjQueryプラグインにしておきました。 異なる画角の画像を均等なサイズで表示させる方法バラバラのサイズの画像をとある矩形の横幅いっぱいに揃えて表示する場合、max-widthで横幅と、あとheight: autoを指定しておくのが一番手っ取り早いのですが、想定外の横長の画像とかが入って来ると下に余白ができてしまいます。 静的なページではある程度画像サイズを均一にしておくなどしていくらでも対応可能なのですが、動的なページ制作の場合では、バラバラの画角の画像が入ってくる事も想定されるので、思った通りの表示にならない事が多いです。 なのでCSSで綺麗に表示を整えようと思

[FromAtom]

便利っぽい。