Как обрезать картинку

Короткий ответ

Задайте картинке нужные пропорции через aspect-ratio и object-fit: cover — лишнее обрежется:

<img src="/media/photo-800x500.jpg" alt="A flower" style="width: 160px; aspect-ratio: 1; object-fit: cover;">

Сам файл не меняется: CSS лишь показывает его часть.

Какую часть оставить

По умолчанию картинка обрезается по центру. object-position сдвигает видимую область — к краю или на точные проценты:

<style>
  img { width: 120px; aspect-ratio: 1; object-fit: cover; }
</style>
 
<img src="/media/photo-600x200.jpg" alt="Left" style="object-position: left;">
<img src="/media/photo-600x200.jpg" alt="Center">
<img src="/media/photo-600x200.jpg" alt="Right" style="object-position: right;">

Обрезать фигурой

clip-path вырезает из картинки круг, многоугольник или прямоугольник со скруглёнными углами:

<img src="/media/photo-400x250.jpg" alt="A flower" width="200" style="clip-path: polygon(50% 0, 100% 100%, 0 100%);">

Частая ошибка

Картинку обрезают, поместив её в блок с overflow: hidden, а нужный кусок ищут отрицательными отступами. Такой код ломается при смене размеров и файла. object-fit с object-position делают то же самое без подгонки чисел.