The svg flags from flagcdn have varying aspect ratios, and I’m trying to force them all into a 3/2 aspect ratio, but with the 2 approaches I’ve tried below the Brazil flag shows some white space on the sides while the GB flag above and below. How I can fix it?
li {
font-size: xx-large;
}
.inline-flag {
display: inline-block;
height: 0.9em;
transform: translate(0, 0.15em);
border: black 2px solid;
aspect-ratio: 3/2;
}
div img {
object-fit: fill;
height: 100%;
width: 100%;
}
<h1>without div</h1>
<ul>
<li>
<img class="inline-flag" src="https://flagcdn.com/fr.svg"> France
</li>
<li>
<img class="inline-flag" src="https://flagcdn.com/br.svg"> Brazil
</li>
<li>
<img class="inline-flag" src="https://flagcdn.com/gb.svg"> Great Britain
</li>
</ul>
<h1>with div</h1>
<ul>
<li>
<div class="inline-flag"><img src="https://flagcdn.com/fr.svg"></div> France
</li>
<li>
<div class="inline-flag"><img src="https://flagcdn.com/br.svg"></div> Brazil
</li>
<li>
<div class="inline-flag"><img src="https://flagcdn.com/gb.svg"></div> Great Britain
</li>
</ul>
3
Answers
Try using
object-fit: cover;
in withdiv
The reason why your flags don’t resize is because they’re SVGs and they don’t resize unless the
preserveAspectRatio
attribute within the SVG itself is set tonone
. If you look at the SVG source you’ll see this isn’t set. If you copy/paste the SVG yourself then change that attribute you can get it to work. See code below:You need to override the aspect ratio of the SVG using the fragment identifier
#svgView(preserveAspectRatio(none))
when loading it, e.g.More information about fragment identifiers can be found here: https://www.w3.org/TR/SVG11/linking.html#LinksIntoSVG
Working example