IEやedgeでmax-widthやmax-heightを使ったSVGが正しく表示されない時の対処法
最終更新日: Update!!
今回はタイトルの通り、GoogleChromeやFirefoxなどのモダンブラウザでは問題なく表示されるのにIEやedgeでは正しい比率ではなく伸びたり縮んだりして表示されてしまう場合の対処法についてです。
max-widthとmax-heightを使うことで起こるバグ
IEやedgeの場合、インラインSVGに対して、レスポンシブ対応などでmax-widthやmax-heightを使用しているとそのサイズが適用されないというバグがあるようです。具体的にどうなるかというと伸びたり縮んだりして、正しいアスペクト比で表示されないようになってしまいます。 そこで対処法としてですが、widthやheightで数値を設定してあげる必要があります。こうすることでwidthやheightで指定した数値が適用され正しく表示されるようになります。 このバグはSVGに見られ、jpgやpngなどのビットマップ画像だと発生しないようです。ですので、「.svg」を後方一致でのマッチングでフィルタしてあげると良さそうです。// HTML <div> <img src="sample.svg" class="fluid"> </div> // CSS img.fluid { max-width: 100%; } img[src$=".svg"].fluid { width: 100%; }近年SVGなどのベクターデータを使うケースが増えてきていますが、IEなどで使う場合は少し注意が必要ですね。 (参考) SVGをimgで表示した場合にIEだけサイズが変になる現象を直す IE11以下でのmax-widthとSVG
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories