Круглая картинка css: Как сделать круглые изображения? | htmlbook.ru

Leave a Comment / Css / By /

Как сделать круглые изображения? | htmlbook.ru

Тема:Скруглённые уголки

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+4.0+11.60+5.0+4.0+2.1+2.0+

Задача

Превратить изображения в круг и добавить вокруг них рамку.

Решение

Для скругления уголков у элементов в CSS3 предназначено свойство border-radius, значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.

Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round, с тенью и рамкой.

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

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круглые изображения</title>
  <style>
   .round {
    border-radius: 100px; /* Радиус скругления */
    border: 3px solid green; /* Параметры рамки */
    box-shadow: 0 0 7px #666; /* Параметры тени */
   }
  </style>
 </head>
 <body>
   <p><img src="images/thumb1.jpg" alt="">
      <img src="images/thumb2.jpg" alt="">
      <img src="images/thumb3.jpg" alt=""></p>
 </body>
</html>

Результат данного примера в Opera показан на рис. 1.

Рис. 1. Круглые изображения

Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).

Рис. 2. Рамка в браузере Chrome

Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow. Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.

Пример 2. Рамка из тени

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Круглые изображения</title>
  <style>
   .round {
    border-radius: 100px; /* Радиус скругления */
    box-shadow: 0 0 0 3px green, 0 0 13px #333; /* Параметры теней */
   }
  </style>
 </head>
 <body>
   <p><img src="images/thumb1.jpg" alt="">
      <img src="images/thumb2.jpg" alt="">
      <img src="images/thumb3.jpg" alt=""></p>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Рамка в браузере Chrome

Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin.

CSS3

  • border-radius
  • box-shadow

html — Сделать из прямоугольного изображение круглое в css

Задать вопрос

Вопрос задан

Изменён 5 лет 9 месяцев назад

Просмотрен 12k раза

Дано прямоугольное изображение в макете, которое необходимо сделать круглым. Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..

. item {
  margin-left: 150px;
}

.photo {
  width: 132px;
  height: 132px;
  margin: 0 auto;
  overflow: hidden;
}

.personPhoto {
  border-radius: 50%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}
<article>
  <div>
    <img alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvTnQ10XsARegWrtgIwH8LiUMMNeggR5CDtHdVDUPFZwdTA-En">
  </div>
</article>

  • html
  • css
  • bootstrap

2

  1. Закругляем div-обертку, а не изображение
  2. Выставляем width:auto у изображения для сохранения пропорций.
.item {
  margin-left: 150px;
}

.photo {
  width: 132px;
  height: 132px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}

.
 
 personPhoto {
  width: auto;
  height: 100%;
  margin: 0 auto;
}
<article>
  <div>
    <img alt="" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvTnQ10XsARegWrtgIwH8LiUMMNeggR5CDtHdVDUPFZwdTA-En">
  </div>
</article>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

круглых изображений с CSS — WebFX

В этом уроке мы рассмотрим некоторые приемы CSS для рендеринга круглых элементов . Основное свойство CSS, отвечающее за эффект, — border-radius . Хотя применить эффект к квадратным изображениям довольно просто, прямоугольные изображения потребуют немного больше дополнительной работы.

Посмотреть демо Скачать исходный код

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

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

CSS 

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

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

 .circular--square { border-top-left-radius: 50% 50%; граница-верхний-правый-радиус: 50% 50%; граница-нижний-правый-радиус: 50% 50%; граница-нижний-левый-радиус: 50% 50%; }

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

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

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

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

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

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

HTML

CSS 

 .circular--landscape { display: inline-block; положение: родственник; ширина: 200 пикселей; высота: 200 пикселей; переполнение: скрыто; радиус границы: 50%; } . circular--альбомное изображение { ширина: авто; высота: 100%; поле слева: -50px; }

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

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

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

 левое поле: -50px;

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

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

HTML

CSS 

 .circular--portrait { положение: относительное; ширина: 200 пикселей; высота: 200 пикселей; переполнение: скрыто; радиус границы: 50%; } .circular--портретное изображение { ширина: 100%; высота: авто; }

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

Для изображений с портретной ориентацией мы назначаем высоту auto и ширину 100%. (Мы сделали обратное для изображений с альбомной ориентацией.) Нам не нужно перемещать img element, потому что мы ожидаем, что объект фотографии находится в центре верхней части композиции.

Резюме

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

Но мы живем не в идеальном мире, поэтому при необходимости можно использовать обёртку div для прямоугольных элементов img . Основным свойством CSS, отвечающим за круглую форму, является border-radius 9.0004 собственность. Установка радиуса углов на 50% от ширины/высоты приводит к кругу.

Связанный контент

Адаптивное полное фоновое изображение с помощью CSS Как создать кнопки-призраки CSS Создание адаптивных изображений с помощью CSS

Джейкоб Губе — основатель Six Revisions. Он фронтенд-разработчик. Свяжитесь с ним в Твиттере.

html - Как закруглить углы изображения внутри мягкой рамки, css

Задавать вопрос

спросил

Изменено 1 год, 11 месяцев назад

Просмотрено 814 раз

Я знаю, что вы можете скруглять углы изображений в CSS, используя радиус границы. Но у меня есть граница вокруг некоторых изображений с отступом 5 пикселей между изображением и границей. Использование border-radius округляет границу, но не изображение внутри нее. Есть ли способ округлить само изображение?

 .изображение-ссылка {
    граница: #2EC4B6 сплошная 3 пикселя;
    отступ: 5px;
    box-sizing: граница-коробка;
    радиус границы: 5px;
} 
 <дел>
                
                    картинка блюда

<-- Вот как это выглядит, если я оберну только тег привязки.

  • html
  • css
  • изображение
  • стиль

2

Просто переместите границу и заполнение на внешнюю ссылку. И только само круглое изображение.

См. пример:

 .outer-link {
 отображение: встроенный блок;
 граница: #2EC4B6 сплошная 3 пикселя;
 отступ: 5px;
 box-sizing: граница-коробка;
 радиус границы: 8px;
 высота строки: 0;
}
.