Css Img 未拉伸以满足所需的纵横比

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>

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

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>

Css相关问答推荐

主dart 文件未加载Flutter Web

如何使搜索框扩展并溢出其他内容

MUI Reaction移除焦点上的轮廓边框

为什么在RadixUi上应用Tailwincss和自定义css类不起作用？

Next.js中的TailWind CSS类名称疑难解答

将鼠标悬停在具有效果的元素上

如何解决 Spotify 嵌入代码中的白色背景错误？

为什么所有选项卡都没有显示在 React 的 MUI 选项卡组件中？

有人可以解释为什么我的 CSS 转换如此突然吗？

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

父母是内联块，子元素有％填充=奇怪的行为

CSS中元素的重叠

CSS网格使sibling 项目拉伸

如何创建一个与 Bootstrap 3 配合得很好的粘性页脚

firefox overflow-y 不能使用嵌套的 flexbox

如何保持标题静态，滚动时始终位于顶部？

CSS：在图像周围创建白光

如何使用 CSS 绘制复选标记/勾号？

CSS3可以转换字体大小吗？

CSS 中的星号属性是什么意思？