Чтобы обрезать картинку в CSS, можно использовать свойство «clip». Это свойство определяет, какая часть элемента должна быть отображена, и обычно используется с позиционированием элемента.
Cвойство «clip» принимает 4 значения — значение для оси X начала обрезки, значение для оси Y начала обрезки, значение для оси X конца обрезки и значение для оси Y конца обрезки. Эти значения задаются в пикселях или процентах.
Например, если вам необходимо обрезать картинку и оставить видимой только ее верхнюю часть, то можно добавить CSS-правило в следующем формате:
img {
position: relative;
clip: rect(0px, auto, 50px, auto);
}
В этом примере мы используем свойство «clip» с функцией «rect()», которая определяет, какая часть элемента будет отображаться. Первое значение «0px» — это начало обрезки по оси Y, второе значение «auto» — это начало обрезки по оси X, третье значение «50px» — это конец обрезки по оси Y, и четвертое значение «auto» — это конец обрезки по оси X.
Здесь мы установили значение начала обрезки по оси Y равным нулю, конца обрезки по оси Y равным 50 пикселям, что позволяет нам отображать только верхнюю часть элемента.
Можно также использовать проценты вместо пикселей для точного масштабирования обрезки.