SVG画像を横幅100%・縦幅100%で背景に設定できないときの対応方法

2018.07.01

SVG画像を横幅100%・縦幅100%で背景に設定した際に、GoogleのChromeで見ると画像がコンテンツサイズに縮んでしまうという現象が起きました。

調べてみたところ海外の質問サイトに回答がありました。

background-size:100% 100%; doesn't work properly in Chrome

SVGファイルをテキストエディターで開き、「preserveAspectRatio="none"」というタグを、SVGタグ内に埋め込むことで解決しました。

<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1369.01 516.51"><defs><style>.cls-1{fill:#faf9f4;stroke:#c8ab8a;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><title>content_bg</title><polygon class="cls-1" points="1368.26 515.76 0.75 515.76 0.75 43.91 684.51 0.76 1368.26 43.91 1368.26 515.76"/></svg>

下記のページに詳しい解説が記載されています。

https://www.yootheme.com/support/question/6801?order=modified

もし同じような問題が起こっている方がいれば、ぜひ参考にして頂ければ幸いです。


最新の投稿

お問い合わせ・お見積り(無料)






Contact