画像をCSSだけでハイクオリティに縮小サムネイル化する方法
2009年03月19日-
スポンサード リンク
Tip: High quality CSS thumbnails in IE7 ・Devthought
画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。
普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。
具体的には以下のCSS指定によってそれが可能みたいです。
img { -ms-interpolation-mode: bicubic; }
デモページ
う〜ん、縮小してもとっても綺麗です。
FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。
これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。
転送量を考えれば、サムネイルが完全に不要になるということは無さそうですが、知っていることで、他画像とのサイズあわせぐらいならばブラウザ上でやっちゃえそうです。
知っていると知らないでは大違い、かも。
関連エントリ
画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。
普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。
具体的には以下のCSS指定によってそれが可能みたいです。
img { -ms-interpolation-mode: bicubic; }
デモページ
う〜ん、縮小してもとっても綺麗です。
FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。
これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。
転送量を考えれば、サムネイルが完全に不要になるということは無さそうですが、知っていることで、他画像とのサイズあわせぐらいならばブラウザ上でやっちゃえそうです。
知っていると知らないでは大違い、かも。
関連エントリ
関連の記事検索:CSS
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 約7500種の汎用ピクトグラムアイコン集「Phosphor Icons」
- 過去のエントリ