css - Img 未拉伸(stretch)以满足所需的纵横比

Question

来自 flagcdn 的 svg 标志具有不同的宽高比，我试图将它们全部变成 3/2 的宽高比，但是通过我在巴西国旗下面尝试过的 2 种方法，在侧面显示了一些空白而上方和下方有 GB 标志。我该如何修复它？

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>

Answer 1

您需要使用片段标识符 #svgView(preserveAspectRatio(none)) 覆盖 SVG 的宽高比加载时，例如

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

有关片段标识符的更多信息可以在这里找到:https://www.w3.org/TR/SVG11/linking.html#LinksIntoSVG

工作示例

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>