Question 160330 in CSS Question posted in
Some basic documentation can be found here.

Why isn’t my CSS img stretching to meet desired aspect ratio?

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>
Tags:

3

Answers


  1. 0

    Try using object-fit: cover; in with div

    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: cover;
  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 and object-fit: cover</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>
    Login or Signup to reply.
  2. 0

    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 to none. 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:

    li {
  font-size: xx-large;
}

li > div {
  display: inline-block;
  height: 0.9em;
  aspect-ratio: 3/2;
  border: 2px solid black;
}

li > div > :is(img, svg) {
  width:100%; 
  height:100%;
  transform: translateY(-1px); /*nudge up a bit */
}
    <ul>
  <li>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600" preserveAspectRatio="none"><clipPath id="a"><path d="M0 0v30h60V0z"/></clipPath><clipPath id="b"><path d="M30 15h30v15zv15H0zH0V0zV0h30z"/></clipPath><g clip-path="url(#a)"><path d="M0 0v30h60V0z" fill="#012169"/><path d="M0 0l60 30m0-30L0 30" stroke="#fff" stroke-width="6"/><path d="M0 0l60 30m0-30L0 30" clip-path="url(#b)" stroke="#C8102E" stroke-width="4"/><path d="M30 0v30M0 15h60" stroke="#fff" stroke-width="10"/><path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/></g></svg></div> Great Britain
  </li>
</ul>
    Login or Signup to reply.
  3. 0

    You need to override the aspect ratio of the SVG using the fragment identifier #svgView(preserveAspectRatio(none)) when loading it, e.g.

    https://flagcdn.com/br.svg#svgView(preserveAspectRatio(none))

    More information about fragment identifiers can be found here: https://www.w3.org/TR/SVG11/linking.html#LinksIntoSVG

    Working example

    li {
    font-size:xx-large;
}

.inline-flag {
  display: inline-flex;
  width: 60px;
  height: 25px;
  border: black 2px solid;
  overflow: hidden;
}

.inline-flag > img {
  flex: 1;
  width: 100%;
  height: 100%;
}
    <ul>
    <li>
        <div class="inline-flag">
            <img src="https://flagcdn.com/fr.svg#svgView(preserveAspectRatio(none))">
        </div>
        France
    </li>
    <li>
        <div class="inline-flag">
          <img src="https://flagcdn.com/br.svg#svgView(preserveAspectRatio(none))">
        </div>
        Brazil
    </li>
    <li>
        <div class="inline-flag">
          <img src="https://flagcdn.com/gb.svg#svgView(preserveAspectRatio(none))">
        </div>
        Great Britain
    </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search