[CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート

画像を大量に配置するECサイトなどに便利そうな、スタイルシートのテクニックをCSSplayから紹介します。

デモのキャプチャ

CSS play - F.a.S.T - Fit and Shrink Technique
デモ

サイズはばらばらで、しかもサイズの指定をおこなっていない画像を一定の幅と高さのボックスにアスペクト比を維持したまま真ん中に表示します。

上記のキャプチャはスケールを変えているので、ぜひ元サイトのデモをご確認ください。

対応ブラウザはIE7/8, Fx, Op, Safari(PC), Chromeなど主要なブラウザのほとんどで動作します。
IE6では画像の元サイズで表示されてしまい、しかもボックスの真ん中には表示されない、とのことです。

sponsors

top of page

©2024 coliss