SPOTブログ

2013/04/12

CSS3のborder-radiusで画像を円形に切り抜いてボーダーを付ける時のハック

border-radius-hack

最近はCSS3が普及してきたことで、サークルデザイン(円形)のデザインが増えてきていますね、2013年のトレンドデザインとしてもサークルデザインがよく取り上げられます。

今回は、CSS3のborder-radiusを使って画像を円形に切り抜き、更に円形のborderでかこむデザインをコーディングしていたのですが、iPhoneのSafariやモバイルGoogle Chromeで不具合が起こったので、メモとして残しておきます。

普通にimg要素にCSS3で装飾したら、不具合が・・・

最初に書いたコードはこんな感じでした。
hanako.jpg自体は300x300pxの画像で、CSSでwidthとheightを184pxに縮小表示しています。

これでもPC版のSafari,Chrome,IE9以降では問題なく表示出来るのですが、モバイルsafariやモバイルChromeでは、以下のようになってしまいました。

css3-border-radius-miss.jpg

画像自体はborder-radius:50%で円形に切り取れていますが、ボーダーは切り取る前の正方形に対して引かれてしまい、欠けてしまっています。

※IE8以前では、border-radiusに対応していないので、この場合は184×184の正方形にボーダーが引かれたデザインになりますが、今回は無視します。

img要素ではなくbackground画像として指定する

調べたところ、この問題への良くある対処法として、img要素として配置するのでは無く、background-imageとして配置することで回避するという方法がよく使われているようです。

今回の場合は、300x300pxの画像を184pxに縮小しなければいけないのでbackground-sizeプロパティで調整することになるのですが、
これがcss3のプロパティなので、IE8以下だと効いてくれず、画像のサイズがずれて表示されてしまいます。うーん、これはこまった。

最終手段のホワイトハックを使う

そこで、あんまりスマートな方法ではないのですが、IEの条件分岐を使って、imgとbackgroundの表示を分けることで今回は対応しました。

こうすることで、IEの場合はimgで表示させ、それ以外のブラウザの場合はdivに設定したbackground画像で表示させます。
これで、意図したとおりの表示が出来るようになりました。