代码之家 › 专栏 › 技术社区 › Thanveer Shah

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

css3 html5 angular

0

Thanveer Shah · 技术社区 · 7 年前

即使在给出 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;
}

3 回复 | 直到 7 年前

1

lemek 7 年前

我试图重现你的问题: CodeSandbox 一切似乎都按预期工作,所以我认为它可能与浏览器相关。每个浏览器都会出现此问题吗?你缩放过你的页面吗?

2

0

meavrik 7 年前

.brands 
{
...
clip-path: rectangle(0, 0, 100%, 200px);
}

3

0

Hamza Arab 7 年前

给你 img max-width:100%; 和 height:auto; 或者如果你正在使用 bootstrap 给它一类 img-responsive 或 img-fluid 取决于您的版本。