如何使图像保留在容器内而不会溢出

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 一切似乎都按预期工作，所以我认为可能与浏览器有关。是否在每个浏览器上都会出现此问题？您缩放了页面（缩放）了吗？

Answer 2

'import'

Answer 3

给您的img max-width:100%;和height:auto;，或者如果您使用的是bootstrap，则根据其类别，给它一个img-responsive或img-fluid您的版本。