angular - 如何让图片留在容器内不溢出

Question

即使在给容器 overflow:hidden 之后，容器内的图像也会溢出。

这根本不会发生，并且在给出 overflow:hidden 之后也不应该发生，但是由于某种原因它仍然会出错

如有任何帮助，我们将不胜感激。

图片

HTML:

<div class="row">
    <div class="col-xl-3 col-lg-3 col-md-6" *ngFor="let images of brandImages">
      <div class="brands">
        <img src="{{ images }}" alt="" />
      </div>
    </div>
  </div>

CSS

.brands {
  margin-top: 18px;
  border: 1px solid silver;
  height: 200px;
  margin-bottom: 25px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Answer 1

我已尝试重现您的问题:CodeSandbox一切似乎都按预期工作，所以我认为这可能与浏览器有关。每个浏览器都会出现这个问题吗？您是否缩放了页面(缩放)？