Для обрезки изображений в CSS используется свойство clip, которое позволяет указать прямоугольную область изображения, которую нужно отобразить. Применение этого свойства приводит к тому, что часть изображения, выходящая за пределы заданной области, будет скрыта.
Для использования clip необходимо задать элементу CSS-свойство position: absolute или position: fixed. Также нужно задать координаты верхнего левого угла вырезаемой части и нижнего правого угла, которые будут образовывать прямоугольную область.
Например, если нужно обрезать левый верхний угол изображения, можно использовать такой код:
img {
position: absolute;
clip: rect(0px, 100px, 100px, 0px);
}Здесь мы выбираем прямоугольную область с верхним левым углом в точке (0,0) и нижним правым углом в точке (100, 100). Это образует квадратную область размером 100×100 пикселей в левом верхнем углу изображения.
Еще один способ обрезки изображения — это использовать свойство overflow: hidden, которое скрывает части элемента, выходящие за его пределы. Такой подход может быть полезен, если нужно скрыть определенную часть изображения, но не использовать clip.
div {
width: 200px;
height: 200px;
overflow: hidden;
}
img {
width: 300px;
height: 300px;
margin-left: -50px; /* сдвиг влево, чтобы обрезать правую часть изображения */
}Здесь мы создаем контейнер div с размерами 200×200 пикселей и применяем к нему overflow: hidden. Внутри контейнера размещаем изображение с размерами 300×300 пикселей и сдвигаем его на 50 пикселей влево, чтобы скрыть правую часть картинки за границами контейнера.
