Html 使用CSS防止大小调整容器内的图像失真

给出一个HTML代码片段

<div class="swiper-slide">
  <div layout="row" layout-align="start stretch" flex style="height: 100%;">
    <div layout="row" layout-align="center center" flex="grow">
      <img src="/media/{{mediaId}}/h/1440">
    </div>
  </div>
</div>

---

图像确实保持居中，并且不会超出其父容器，但是在调整组件大小时，它会水平拉伸或收缩。是否可以判断图像元素应保留显示图像的纵横比？

将图像显示为容器块的背景，该容器块可根据您的需要拉伸

大概是这样的：

<div class="swiper-slide">
  <div layout="row" layout-align="start stretch" flex style="height: 100%;">
    <div layout="row" layout-align="center center" flex="grow">
      <div 
        class="img-container" 
        style="background-image: url(/media/{{mediaId}}/h/1440)"
      >
      </div>
    </div>
  </div>
</div>

---

通过这种方式，你可以确保图像不会只在一个方向上拉伸，使其看起来很不舒服，而是保持比例。

在最大高度上使用

拉伸

，它在旧浏览器中不起作用。你必须为这些浏览器使用一些粗糙的css

img{
显示：块；
最大宽度：100%；
最大高度：-可使用webkit填充；
最大高度：-moz可用；
最大高度：可用填充；
边框：1px纯蓝色；
}
.集装箱{
边框：1px纯红；
宽度：300px；
高度：300px；
填充物：5px；
边缘底部：20px；
}

尝试仅更改宽度或高度，而不是两者都更改。不幸的是，这将导致高度或宽度超出父级。您可能会发现这很有帮助，因为我认为它包含了解决方案：您的所示代码在Firefox上对我来说似乎正常工作。不过，我强烈建议您删除内联

样式

。这将是导致您的问题的一个因素。在Chrome中工作。在Firefox 62.0.3中似乎不起作用谢谢我认为

stretch

不是官方的，改为

fill available

请告诉我您是否有时间检查它是否起作用

<div class="swiper-slide">
  <div layout="row" layout-align="start stretch" flex style="height: 100%;">
    <div layout="row" layout-align="center center" flex="grow">
      <div 
        class="img-container" 
        style="background-image: url(/media/{{mediaId}}/h/1440)"
      >
      </div>
    </div>
  </div>
</div>

.img-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}