Как вставить картинку и обрезать по фигуре: круг и скругления (HTML/CSS

Как вставить картинку и обрезать по фигуре: круг и скругления (HTML/CSS)

В 80% случаев достаточно border-radius + правильной «кадровки» через object-fit: cover. Для нестандартных форм пригодится clip-path или SVG.

- База (вставка):

\<img src="img.jpg" alt="Описание">

- Адаптивно и без «полоски» снизу:

img { max-width: 100%; height: auto; display: block; }

- Круглый аватар (лучший способ — через контейнер):

.avatar{width:120px;height:120px;border-radius:50%;overflow:hidden}

.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

- Скруглённые углы + аккуратная обрезка (карточки/превью):

Скругляйте контейнер и ставьте overflow: hidden, а картинке — object-fit: cover.

- Кадрирование внутри формы:

object-fit: cover; (заполняет, лишнее обрежется)

object-position: 50% 20%; (сдвиг «кадра», например ближе к лицу)

- Нестандартная форма:

clip-path: circle(50% at 50% 50%); или clip-path: polygon(...);

Для сложных контуров точнее использовать SVG clipPath/mask.

Вывод: для кругов и скруглений берите контейнер + overflow: hidden + object-fit: cover; всё «дизайнерское» — через clip-path или SVG.

Подробнее: https://www.ivan-kornev.ru/articles/web-services/features/insert-image-crop-to-shape-circle-rounded-corners