SVG背景の幅/高さがコンテナのサイズに調整されていない

Question

私はsvg background-imgを取得して、画面サイズにかかわらず要素全体をカバーしようとしています。

私はカバーとしてbackground-size、およびpreserveAspectRatio="none" SVGに設定、SVGのwidthとheightを削除しようとしました。運がない。

ご協力いただければ幸いです。

私のSVG、mountains.svg

：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    preserveAspectRatio="none" viewBox="0 0 1024 800" xml:space="preserve"> 
<g> 
    <polygon fill="#3C5E7E" points="661.914,566.889 700.57,529.312 721.889,593.389 "/> 
    <polygon fill="#2E4560" points="835.405,373.64 892.21,414.48 972.249,536.266 910.915,690.195 828.119,690.195 815.137,580.579  
     "/> 
    <polygon opacity="0.1" fill="#2E4560" enable-background="new " points="1278.392,222.524 1223.854,99.999 1070.468,430.561 
     1000.496,399.506 1000.496,399.506 991.525,424.285 982.885,404.468 955.668,456.688 887.434,290.596 856.723,388.965 
     706.694,132.673 439.204,690.195 669.622,690.195 730.842,563.832 822.991,373.64 826.372,366.664 892.21,414.48 955.668,523.375 
     994.012,424.918 999.104,403.352 1070.468,430.561 1171.972,475.949 1278.392,523.395 "/> 
    <polyline fill="#335573" points="213.419,331.142 259.255,614.528 207,580.677 190.316,614.937 161.348,610.442 140.994,690.195 
     0,690.195 0,656.528 112.209,548.057 213.419,331.142  "/> 
    <polygon fill="#324668" points="55.004,480.378 41.254,580.268 30.621,570.892 0,656.528 90.705,571.131 "/> 
    <polygon fill="#335573" points="1000.496,399.506 1083.912,688.581 1013.475,674.514 997.251,690.195 895.303,690.195 "/> 
    <polygon fill="#335573" points="55.004,480.378 41.804,592.918 30.803,575.793 0,656.528 0,614.521 "/> 
    <polygon fill="#324668" points="1000.496,399.506 1070.468,684.719 1011.152,650.684 997.251,690.195 1278.392,690.195 
     1278.392,523.395 "/> 
    <polygon fill="#2E4560" points="700.57,529.312 706.951,594.512 750.563,584.407 763.324,554.088 "/> 
    <polygon fill="#98D0D1" points="998.646,395.097 1021.582,503.337 1025.98,483.232 1076.028,538.369 1056.565,458.727 
     1127.466,484.594 1084.834,447.836 1109.393,447.836 "/> 
    <polygon fill="#F7F9F9" points="1023.665,492.082 1010.689,562.193 986.592,517.949 932.755,586.699 998.646,395.097 "/> 
    <polyline fill="#3C5F82" points="392.734,690.195 640.941,572.302 520.041,444.547 418.755,561.525 302.658,595.459 
     392.734,690.195  "/> 
    <polyline fill="#2E4560" points="379.119,690.195 463.992,573.102 497.621,586.699 511.231,555.537 556.07,577.894 
     520.041,444.547 803.481,649.757 841.11,690.195 379.119,690.195 "/> 
    <polygon fill="#335573" points="895.303,690.195 858.799,528.432 817.91,574.679 840.958,377.63 826.372,366.664 669.622,690.195 
     "/> 
    <polygon fill="#81C6CC" points="520.041,444.547 527.849,484.919 539.358,496.05 542.662,483.874 550.167,489.264 547.365,479.881 
     554.47,481.678 551.269,476.188 564.729,476.633 "/> 
    <polygon fill="#F7F9F9" points="520.041,444.402 531.953,488.165 531.953,493.154 521.143,483.573 525.996,505.131 
     509.533,486.866 511.035,495.152 504.029,488.363 500.225,498.045 497.423,484.971 480.309,489.462  "/> 
    <polygon fill="#F7F9F9" points="702.716,551.262 699.973,541.027 689.386,554.238 694.014,543.78 689.085,544.85 691.768,541.027 
     686.234,542.859 700.57,529.312 "/> 
    <polygon fill="#81C6CC" points="700.187,529.012 702.716,551.262 703.306,536.609 711.89,552.741 709.503,541.027 718.81,544.85 
     714.606,538.294 723.615,537.995  "/> 
    <g id="Layer_3"> 
     <polygon fill="#324668" points="213.419,331.142 246.421,595.367 205.718,548.881 190.316,614.937 159.513,590.472 
      133.111,690.195 392.734,690.195   "/> 
     <polygon fill="#98D0D1" points="213.419,329.92 228.423,451.268 228.423,394.852 239.821,419.217 236.52,387.979 255.651,415.708 
        "/> 
     <polyline fill="#FFFFFF" points="213.419,329.92 172.615,418.593 199.118,391.205 189.216,451.268 213.419,402.091 
      228.423,451.268   "/> 
    </g> 
</g> 
</svg> 

マイHTML：

<style> 
#header { 
    margin:0 0 0 0; 
    height: 110%; 
    background-image: url(mountains.svg); 
    background-size:cover; 
    background-position: 0 -50px; 
    -o-background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
} 
</style> 
<body> 
<div id="header"> 

</div> 
</body> 

Answer 1

以下は、私のテストに取り組んでいます。おそらくあなたのスタイルシートコードに問題があります。

#header { 
    margin: 0 0 0 0; 
    display: block; 
    height: 100vh; 
    background-image: url("mountains.svg"); 
    background-position: 0 -50px; 
} 

あなたは、ヘッダー、親に属性heightを設定する場合は、このプロパティの値inheritを使用することができます。