Почему изображение не подстраивается под размеры контейнера с помощью свойства object-fit: cover?

Свойство object-fit: cover позволяет масштабировать изображение, чтобы оно полностью заполнило заданный контейнер, сохраняя при этом пропорции изображения. Однако, оно не обрезает изображение, если его размеры превышают размеры контейнера.

Чтобы выровнять картинки в данной разметке HTML с помощью CSS, можно использовать свойство background-image вместо тега <img>. Например:

HTML:
```html
<div class="image-container"></div>
```

CSS:
```css
.image-container {
  width: 200px;
  height: 200px;
  background-image: url('путь_к_изображению');
  background-size: cover;
  background-position: center;
}
```

При использовании background-image и свойства background-size: cover, изображение будет масштабироваться и обрезаться, чтобы полностью заполнить заданный контейнер. Свойство background-position: center будет центрировать изображение в контейнере.

Если вам необходимо обрезать картинки, только если их высота превышает заданный размер, можно использовать комбинацию свойств max-height и overflow: hidden. Например:

CSS:
```css
.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  max-height: 100%;
  width: auto;
}
```

Таким образом, изображение будет автоматически масштабироваться по ширине, но останется в пределах высоты контейнера, и его лишняя часть будет скрыта благодаря свойству overflow: hidden.