Google chromeで画像を縮小表示したときにぼける問題の回避方法

| コメント(0)
2018/8/2 追記
いつの間にか↓の画像を比較してもほとんど差がなくなっていました。
以前の状態をスクショしていなかったので確実ではありませんが、下記の対策をとらなくてもきれいに縮小されるようになったようです。


高解像度ディスプレイへの対応で、大きめの画像を縮小して使うことがあると思います。
これを Windows の Google chrome で表示するとかなりぼやけてしまうのですが、
その現象の回避方法としてimgに

-webkit-backface-visibility: hidden;

というスタイルを当てるものがあります。

が、自分のサイトの場合当ててみてもまったく変わらず・・
詳しく調べてみたところ、img に以下のスタイルを当てていると効かないようでした

border-radius: ○px;

角丸ですね。
ちょっと不便ですが囲った div に当てるなどで対応できますので、
便利に使っていこうと思います。

もし他にも競合できないスタイルがあった場合は追記します!


■-webkit-backface-visibility: hidden; なし
120509_oshi_01.jpg

■-webkit-backface-visibility: hidden; あり
120509_oshi_01.jpg



コメントする

このブログ記事について

このページは、gravity-worksが2018年3月14日 11:13に書いたブログ記事です。

ひとつ前のブログ記事は「CSSでのフェード時に要素がズレる」です。

次のブログ記事は「CSS:フォントサイズのvw指定を少し楽にする書き方」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。