В этом уроке мы рассмотрим некоторые приемы CSS для рендеринга круглых элементов ‹img›. Основное свойство CSS, отвечающее за эффект, — радиус границы.

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

СКАЧАТЬ ИСТОЧНИК

Квадратные изображения

Для идеально квадратного элемента img требуется всего одна строка CSS. Этот метод лучше всего работает с квадратными изображениями.

HTML

<img class="circular--square" src="woman.png" />

CSS

.circular--square {
  border-radius: 50%;
}

Приведенное выше правило стиля является сокращением для:

.circular--square {
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
}

Установив для всех свойств border-radius значение 50% от ширины/высоты квадратного элемента img, мы придаем элементу img форму круга:

Прямоугольные изображения

Прямоугольные изображения немного сложнее.

Чтобы визуализировать круг, изображение должно начинаться как квадрат.

Чтобы обойти эту проблему, мы можем обернуть элемент img в квадратный элемент. Затем мы «обрезаем» те части элемента img, которые выходят за пределы квадратного div-обертки. Мы можем сделать это, установив для свойства overflow div-оболочки значение hidden.

Чтобы объект фотографии был менее обрезан, мы также должны обрабатывать пейзажные фотографии (которые представляют собой горизонтально ориентированные прямоугольники) иначе, чем портретные фотографии (которые представляют собой вертикально ориентированные прямоугольники).

Альбомно-ориентированные изображения

HTML

<div class="circular--landscape">
  <img src="images/barack-obama.png" />
</div>

CSS

.circular--landscape {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}
.circular--landscape img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}

Значения свойств ширины и высоты должны быть одинаковыми, чтобы div-оболочка (.circular — landscape) отображалась как квадрат.

Кроме того, значения свойств width и height должны быть равны или меньше высоты img. Это гарантирует, что элемент img сможет занимать div-оболочку, не растягиваясь.

Как правило, объект пейзажных фотографий — но не всегда — располагается в центре композиции. Чтобы дать нам больше шансов не обрезать объект фотографии, мы можем отцентровать элемент img по горизонтали в обертке div, сдвинув элемент img влево, чтобы компенсировать смещение кадрирования влево.

Величина, на которую мы сдвигаем элемент img, равна 25% ширины/высоты обертки div. В этом случае мы сдвинем изображение на 50 пикселей (25% от 200 пикселей составляет 50 пикселей) влево. Мы можем добиться этого, установив для свойства margin-left элемента imgelement отрицательное значение:

margin-left: -50px;

Предположение, что объект фотографии будет находиться близко к центру композиции, не всегда будет верным. Лучше всего помнить об этом предположении, когда вы выбираете (или редактируете) изображения для этой техники.

Портретно-ориентированные изображения

HTML

<div class="circular--portrait">
  <img src="images/woman-portrait.png" />
</div>

CSS

.circular--portrait {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}
.circular--portrait img {
  width: 100%;
  height: auto;
}

Предположение, которое мы сделаем для портретно-ориентированных изображений, заключается в том, что объект фотографии находится в верхнем центре композиции. Опять же, это не будет иметь место в каждом отдельном портрете. Фото.

Подобно пейзажным фотографиям, div-обертка портретно-ориентированных элементов img должна иметь одинаковые значения свойств ширины и высоты, чтобы обертка представляла собой идеальный квадрат.

На этот раз значение свойства width/height должно быть меньше или равно ширине элемента img, чтобы изображение могло покрыть оболочку div, не растягиваясь.

Для портретно-ориентированных изображений мы назначаем высоту авто и ширину 100%. (Мы сделали обратное для изображений, ориентированных на альбомную ориентацию.)

Нам не нужно перемещать элемент img, потому что мы ожидаем, что объект фотографии находится в верхнем центре композиции.

Резюме

Этот метод лучше всего использовать на квадратных элементах изображения, когда объект находится в центре фотографии. Но мы живем не в идеальном мире, поэтому при необходимости вы можете использовать div-обертку для прямоугольных элементов img.

Основным свойством CSS, отвечающим за круглую форму, является свойство border-radius. Установка радиуса углов на 50% от ширины/высоты приводит к кругу.

"Есть три ответа на дизайн: да, нет и ВАУ! Вау — это то, к чему нужно стремиться». – Милтон Глейзер