拡大してもボケない画像、svg。背景画像に使用して、レスポンシブ対応で横幅100％で可変にして、、、と思ったところ、アスペクト比を保った状態となり、横幅100%になってくれませんでした。今回はそんなsvg画像を背景画像に指定したときに横幅100％に出来なくて困ったときの対処法を書いていきます。
アスペクト比を保つsvgのプロパティが原因
まず原因ですが、svg画像にはアスペクト比を保つためのプロパティがあり、そのプロパティが指定されていない時の動作がブラウザによって異なる、という事でした。コーダーはいつまで経ってもブラウザ依存に悩まされますね。
解決：「preserveAspectRatio=”none”」を追記
png画像に変換すれば解決、という簡単な対処法もあるのですが、svg画像をつかおうとしている場合、ボケてほしくないような素材を使用しているかと思いますので、svgのまま解決したいですよね。ということで、解決方法がこちらです。
svg画像をテキストエディタで開き、svgタグに「preserveAspectRatio=”none”」を追記しましょう。
追記前
追記後
「preserveAspectRatio=”none”」を追記してあげることによって、背景画像に指定したsvg画像で、縦幅固定の横幅可変という表示が可能になります。
以上、SVG画像をbackgroundに指定したときにbackground-sizeが思ったように効かないときの対処法でした。
