图像放大后，img父级的宽度未缩放

Question

容器：

图片父：

图片：

示例：https://codesandbox.io/s/q4q6lwj719

右侧的图像（和一些CSS规则）使左侧的图像渲染得比其自然尺寸大。但是它的父对象不会随其缩放，并且其大小就像图像以其自然大小呈现一样。

对我来说似乎很奇怪。我想念什么吗？

注意：有时候（似乎是随机的），它已在Chrome（v72.0.3626.119）中修复。在Firefox（v65）中，它总是坏掉的。

Answer 1

这是因为第一个元素样式为<div style="display: flex">。默认情况下，样式align-items设置为stretch，因此图像的大小大于其自然大小。使用样式align-items: center;或将其设置为baseline或任何您想要防止更改大小的样式。

body {
  font-family: sans-serif;
}

.item {
  display: inline-block;
  max-height: 250px;
}

.item img {
  height: 100%;
}

<div style="display: flex; align-items: center;">
      <div class="item video">
        <img
          alt="Quiz of Kings (بازی آنلاین)video"
          src="https://www.conti-engineering.com/CMSPages/GetFile.aspx?guid=6f8b829a-e0a5-49e1-9882-122d1d3efb06"
        />
      </div>
      <img
        class="item"
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgKNQKR-foUvskwO90hnlG_pyTQfeMsyIaFfJiWQV_AkTc8TPB"
      />
    </div>