8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

background-size: 100% 100%; で背景画像 (svg) が縦横いっぱいに広がらない問題

Last updated at Posted at 2019-07-13

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 に「アスペクト比を維持しなくてもいいよ」と指定してあげないと柔軟に縦横に変形してくれないようです。

参考

あとがき

svg まだまだ知らないことだらけです。がんばります。

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?