imgタグでsvgを使った時に、IEだけ表示が崩れる

9712 Views
CSS3
imgタグでsvgを使った時に、IEだけ表示が崩れる

前回に引き続き、SVG関連の記事です。

svgは使い方が様々あり、
・imgタグとして使う
・cssのbackground-imageとして使う
・svgタグとして使う
といった使い方がありますが、今回はimgタグとして使った時に表示崩れが起きる問題についてです。

SNSでシェア♪

スポンサーリンク

IEでimgタグのsrcにsvgを指定した時に崩れる

IE以外のブラウザで使用した時は狙い通りの表示になるが、IEだけは他のブラウザより小さく(サイズによっては大きく)表示されてしまう。。。

これは原因としてはcssに対する記述が足らないことが挙げられます。

 

解決策

svgは自動で親要素にフィットはしないため、css側でimgタグ全体に

といった記述を行うか、

svgタグのみ特別に記述を設定してあげれば解決できます。

ここで注意すべき問題は、必ずheightにautoをかけてあげることです。
これがないと、比率がおかしな状態で拡大縮小されることがあります。

 

私はcssでimgタグ全てにcssを記述する方を推奨します!
※スマホで大きな画像を使った時の崩れ防止にもなりますし。。

 

SNSでシェア♪

スポンサーリンク

関連記事