Обрезка изображения по форме: круг, скруглённые углы и фигуры

Чтобы вставить картинку и обрезать её по фигуре (круг или скруглённые углы), чаще всего достаточно связки: контейнер с overflow: hidden + картинка с object-fit: cover. Для нестандартных фигур используйте clip-path.

Если вам нужен идеальный круг без искажений — делайте круг контейнером, а не самой картинкой.

Оглавление

Вставка изображения и базовая адаптивность

Минимальная вставка:

<img src="images/photo.jpg" alt="Описание изображения">

Чтобы картинка не ломала сетку и не имела «полоски снизу»:

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

Круглая картинка (аватар) без «овала»

Самый стабильный вариант — круг задаёт контейнер:

<div class="avatar">
  <img src="images/avatar.jpg" alt="Аватар">
</div>

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

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* заполняем круг, лишнее обрезаем */
  object-position: 50% 50%; /* можно сместить кадр */
}

Если поставить border-radius: 50% на <img> без одинаковых width и height, получится овал, а не круг.

Скруглённые углы: 2 надёжных способа

Способ 1 — быстро (если кадрировать не нужно):

.photo{
  border-radius: 16px;
}

Способ 2 — “как в карточках” (скругление + аккуратная обрезка):

<div class="thumb">
  <img src="images/product.jpg" alt="Товар">
</div>

.thumb{
  width: 360px;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
}

.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit: cover убирает «белые поля»: картинка заполняет область, а лишнее обрезается. Если важно показать изображение целиком — используйте object-fit: contain, но поля возможны.

Обрезка по фигуре: clip-path

clip-path удобен, когда нужна форма сложнее скругления: ромб, шестиугольник, “срезанные” углы.

Круг через clip-path:

.shape-circle{
  clip-path: circle(50% at 50% 50%);
}

Скруглённый прямоугольник через inset:

.shape-rounded{
  clip-path: inset(0 round 18px);
}

Шестиугольник:

.shape-hex{
  clip-path: polygon(
    25% 6%, 75% 6%,
    100% 50%,
    75% 94%, 25% 94%,
    0% 50%
  );
}

clip-path “режет” область отображения, но не всегда удобен для супер-точных дизайнерских контуров. Если нужна произвольная форма (волна, клякса, сложный контур) — чаще используют SVG-маску/clipPath.

Частые ошибки

  • Появилась тонкая полоска под изображением → добавьте img { display: block; }.
  • Картинка в круге “сплюснулась” → задайте width и height и используйте object-fit: cover.
  • Углы скруглены, но картинка “вылезает” → скругляйте контейнер и ставьте overflow: hidden.
  • Нужно кадрирование (лицо/объект не по центру) → настройте object-position: 50% 20% (или другие значения).

FAQ

Можно ли сделать круг без контейнера?
Можно, но только если у <img> одинаковые width и height (и желательно object-fit: cover).

Что выбрать: border-radius или clip-path?
Для круга и скругления — border-radius. Для многоугольников и нестандартных форм — clip-path.

Почему border-radius на <img> иногда выглядит “грязно”?
Чаще всего проблема в том, что изображение не обрезается по контейнеру или растягивается. Надёжнее: контейнер + overflow: hidden + object-fit: cover.