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