Как сделать так, чтобы изображение оставалось внутри контейнера без переполнения

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

Дайте вашим img max-width:100%; и height:auto; или, если вы используете bootstrap, присвойте ему класс img-responsive или img-fluid в зависимости от вашей версии.

Answer 3

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