SVG 배경의 너비/높이가 컨테이너의 크기에 맞지 않습니다.

행운을 볼 때 화면 크기에 관계없이 요소의 전체를 덮기 위해 svg background-img를 얻으려고합니다.SVG 배경의 너비/높이가 컨테이너의 크기에 맞지 않습니다.

나는 커버로 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>

출처

2016-09-11 beckah

높이 설정 : 110 %; 그러나 몸이나 html에 어떤 높이를 설정 했습니까? vh 대신 %를 사용해 보셨습니까? , ...? 110 %가 CSS 시트에서 부모에 대해 설정된 값을 사용한다고 가정하기 때문에 높이가없는 빈 헤더를 만듭니다 ... 110 % null이 null입니다 –

@GCyrillus body 'width'를 2880px로 설정하면 그리고 'height'를 1800px로 늘리면 여전히 svg의 너비가 헤더 요소를 덮지 않습니다 – beckah

내 테스트와 협력하고 다음; 문제는 아마도 스타일 시트 코드에있을 것입니다.

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

당신이 헤더 부모의 속성 height을 설정하면이 속성에 대한 값 inherit를 사용할 수 있습니다.

출처

2016-09-11 22:05:32 leandroungari

Thanks Makoto :)! – leandroungari

SVG 배경의 너비/높이가 컨테이너의 크기에 맞지 않습니다.

답변

관련 문제