Как обрезать картинку с помощью css?

Для обрезки картинки на веб-странице существует несколько способов с использованием CSS. Рассмотрим два наиболее распространенных способа:

1. Свойство clip-path: это свойство позволяет обрезать элемент с использованием простых форм, таких как круги, эллипсы, многоугольники и так далее. Например, чтобы обрезать картинку круглой формой, вы можете использовать следующий CSS код:

.img-container {
    clip-path: circle(50% at center);
}

2. Свойство object-fit: это свойство позволяет управлять способом изменения размера изображения, чтобы оно соответствовало размеру контейнера, а также способом обрезки изображения в этом контейнере. Например, чтобы обрезать изображение по размеру контейнера, сохраняя пропорции, можно использовать следующий CSS код:

.img-container {
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Оба этих метода могут быть использованы для обрезки изображений на веб-странице с помощью CSS. Выбор конкретного метода зависит от требуемого результата и уровня поддержки браузерами.