tl:dr
svg ファイルを開き、svg タグに対して
<svg preserveAspectRatio="none" ....>....</svg>
と preserveAspectRatio
属性を指定してあげると、できる。
文脈
background-image
で指定した画像を、 background-size: 100% 100%;
でアスペクト比無視して要素いっぱいに広げたかったんだが言うことを聞いてくれなかった。
指定していた画像が svg だったので、もしかしてこのせいかと思ったらそうだったのでメモ。
解説
そもそも svg 画像の表示領域(viewport)は viewBox
という属性によって決まっていて、これを元にアスペクト比をどうするのかを決めるらしい。(viewbox
属性に関しては勉強不足なので詳しい説明は割愛)
また、svg には preserveAspectRatio
という属性があって、この属性のデフォルト値が「(ざっくり言うと)アスペクト比は固定する!」と指定している。
そのため、svg 画像に対して css でアスペクト比を維持しないようにしても、そもそも svg に「アスペクト比を維持しなくてもいいよ」と指定してあげないと柔軟に縦横に変形してくれないようです。
参考
- http://www.fujipro-inc.com/2017/05/31/4785.html
- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
あとがき
svg まだまだ知らないことだらけです。がんばります。