我的图像在 CSS Flexbox 中无法正确调整大小

Answer 1

您提供的代码中存在一些语法错误，并且在

object-fit

类中滥用了

.flex-container

。修复这些问题后，我可以看到图像的表现符合预期。请参阅下面的片段：

.img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.flex-container {
  width: 300px;
  height: 300px;
}

.container {
  display: flex;
  flex-direction: row;
}

<div class="flex-container">
  <div class="row">
    <img src="https://www.w3schools.com/html/img_chania.jpg">
  </div>
</div>

如果下面的代码片段不是您所期望的，那么更详细地描述您打算做什么作为最终结果将有助于增加清晰度。