为什么我需要背景尺寸200％而不是封面

Question

I'm trying to use an inline svg as a background-image (data url), but background-size:cover does not seems to work well, however with 200% its fits perfectly.

I'd like to understand the issue so that I can make sure I have a consistent render with different browsers. Ideally I'd like to keep using background-size:cover if possible

 .card { display: inline-flex; /* required in my context */ width: 45vmax; background-color: lightblue; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 2"><g fill="red"><path d="M0,1v-1h1z" opacity=".4" /><path d="M1,0v1h-1z" opacity=".2"/></g></svg>'); background-size: cover; } ._200percent { background-size: 200%; } .video { padding-top: 56.25%; } body { margin: 0; } 

 <a class="card"> <div class="video"></div> </a> <a class="card _200percent"> <div class="video"></div> </a> 

Answer 1

As commented you can adjust the viewbox to cover the path and avoid having extra spaces and the use of 200%

 svg { border:1px solid; width:200px; } 

 <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 2"><g fill="red"><path d="M0,1v-1h1z" opacity=".4" /><path d="M1,0v1h-1z" opacity=".2"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1 1"><g fill="red"><path d="M0,1v-1h1z" opacity=".4" /><path d="M1,0v1h-1z" opacity=".2"/></g></svg> 

You can also do this using CSS and gradient without the need of SVG

 .card { display: inline-flex; /* required in my context */ width: 45vmax; background: linear-gradient(to bottom right,rgba(255,0,0,0.4) 49.5%,rgba(255,0,0,0.2) 50%), lightblue; } .video { padding-top: 56.25%; } body { margin: 0; } 

 <a class="card"> <div class="video"></div> </a>