Как обрезать прямоугольник в круг с CSS: центрирование, радиус

Быстрый ответ

Для того чтобы сформировать из прямоугольного изображения круглое с помощью CSS, установите контейнеру свойства border-radius: 50% и overflow: hidden, а также примените flexbox для центрирования изображения.

<div class="circle-crop">
  <img src="image.jpg" alt="Круглое изображение"/>
</div>

.circle-crop {
  width: 200px; height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 50%;
}

.circle-crop img {
  height: 100%;
  width: auto;
}

Данный подход позволит обработать любое прямоугольное изображение в идеальный круг, сохраняя при этом его пропорции и центрирование без искажений.

Подробное руководство

Обработка изображения с использованием object-fit

Для достижения оптимального результата круглой обрезки используйте свойство object-fit: cover, позволяющее изображению полностью заполнять контейнер, избегая искажений.

.circle-crop img {
  object-fit: cover; /* Подгоняет изображение, как влитой костюм */
}

Этот метод идеален для обработки изображений различной ширины и пропорций.

Подробнее об этом расскажет наш спикер на видео

Поддержка различными браузерами

Если есть необходимость обеспечения поддержки в более старых браузерах, не распознающих object-fit, используйте фоновое изображение для контейнера – это обеспечит обрезку в любом браузере.

.circle-crop {
  background: url('image.jpg') no-repeat center center; 
  background-size: cover; /* Обеспечивает полное заполнение фона */
}

Постоянно проверяйте поддержку браузерами object-fit и clip-path перед их использованием.

Учет адаптивного дизайна

Чтобы обеспечить масштабирование вашей круглой обрезки вместе с размером окна браузера, используйте процентные значения для свойств width и height.

.circle-crop {
  width: 50%;
  height: 0;
  padding-bottom: 50%; /* Обеспечивает равные отступы и в результате получается круг */
}

Для более плавного масштабирования вместе с контейнером, также задайте border-radius в процентах.

Визуализация

Мы преобразуем квадрат (🟦) в круг (🔵). Начальный квадратный элемент (🟦) преобразуется в идеальный круг (🔵) благодаря правильно подобранным CSS-стилям:

.img-circle {
    border-radius: 50%;  /* Шаг к совершенству формы */
    overflow: hidden;    /* Чистота и законченность формы */
}

Дополнительные возможности с clip-path

Свойство clip-path дает возможность создать более сложные формы или особенно четкие круглые обрезки:

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

Перед использованием этого метода убедитесь, что браузеры поддерживают clip-path.

Примеры в действии

Для большего освоения этих CSS-компетенций, попробуйте их на практике, создавая примеры на таких площадках, как CodePen или JSFiddle:

Попробуйте сами: [Пример на CodePen](https://codepen.io/yourExample)

Полезные материалы

1. Обрезка и маскировка в CSS | CSS-Tricks — подробное руководство по применению этих техник в CSS.
2. border-radius – CSS | MDN — официальная документация по свойству border-radius.
3. border-radius в процентах и пикселях – обсуждение на Stack Overflow — изучение тонкостей использования различных единиц измерения для border-radius.
4. Поддержка border-radius браузерами | Can I use — проверка поддержки браузерами свойства border-radius.
5. Создание скругленных изображений с помощью CSS — простое руководство по формированию скругленных изображений.
6. aspect-ratio | MDN — информация о контроле соотношения сторон, что важно при обрезке изображений.