Для обрезки картинки на веб-странице существует несколько способов с использованием 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. Выбор конкретного метода зависит от требуемого результата и уровня поддержки браузерами.