[CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート
画像を大量に配置するECサイトなどに便利そうな、スタイルシートのテクニックをCSSplayから紹介します。
CSS play - F.a.S.T - Fit and Shrink Technique
デモ
サイズはばらばらで、しかもサイズの指定をおこなっていない画像を一定の幅と高さのボックスにアスペクト比を維持したまま真ん中に表示します。
上記のキャプチャはスケールを変えているので、ぜひ元サイトのデモをご確認ください。
対応ブラウザはIE7/8, Fx, Op, Safari(PC), Chromeなど主要なブラウザのほとんどで動作します。
IE6では画像の元サイズで表示されてしまい、しかもボックスの真ん中には表示されない、とのことです。
Post on:2010年4月13日
Comments
10時のヘッドライン | CROSS SBM
on 2010年4月13日
[...] [...]
18時のヘッドライン | CROSS SBM
on 2010年4月13日
[...] [...]
links for 2010-04-13 « 個人的な雑記
on 2010年4月14日
[...] [CSS]サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート | コリス (tags: css webdesign) [...]
Commit Lab | 今週のweb制作情報まとめ | Web Design Scratch 01
on 2010年4月18日
[...] サイズがばらばらで無指定の画像を一定サイズで表示するスタイルシート | コリス [...]