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

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

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

Вопрос задан 5 лет 4 месяца назад

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

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

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

.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

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

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

Почта

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

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

Почта

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

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

Как сделать круглую картинку в html

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

Решение

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

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

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

HTML5 CSS3 IE Cr Op Sa Fx

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

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

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

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

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

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

HTML5 CSS3 IE Cr Op Sa Fx

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

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

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

Привет. Многим эта статья может показаться достаточно примитивной, и очевидной. Как сделать круглую картинку на CSS? Для этого не нужно делать ничего особенного, читайте далее.

Под круглой картинкой я понимаю картинку, которая вписана в круг. Есть старые подходы, когда картинка вписывается в круг в Photoshop, или когда поверх картинки накладывается другая картинка в PNG, у которой в центре прозрачный круг (через прозрачный круг просвечивает картинка слоем ниже, и получается круглая картинка).

Но сейчас всё можно сделать гораздо проще и быстрее.

Всё ещё хотите узнать как сделать круглую картинку на CSS?

Для работы вам потребуется квадратная картинка (то есть такая, у которой высота = ширине). Если картинка не будет квадратной, то на выходе мы получи не круглую картинку, а овальную (но и это можно решить, об этом в следующих статьях).

Итак, квадратная картинка. У нас есть такой код на HTML:

Теперь просто добавим к этом коду код на CSS:

Готово. Border-radius – это радиус скругления углов. Если border-radius: 50%, то скгругляться угол будет до середины высоты и середины ширины с каждой из сторон. Если картинка квадратная, то border-radius: 50% сделает скругление до середины высоты и ширины с каждой из сторон и образует круг.

overflow: hidden говорит о том, что всё, что не попадает в область видимости объекта должно быть скрыто. То есть то, что выходит за границы объекта (в том числе скругленные углы), будет скрыто. Так мы скрываем квадратные углы, и получаем круглую картинку.

Таким же подходом можно делать любые объекты <div><span><p><button><input> круглыми.

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

Картинка в HTML

Для задания параметров изображения вы также можете воспользоваться атрибутами width и height. Первая настройка отвечает за длину, а вторая – за высоту изображения на странице. Данный параметр задается в пикселях. Таким образом тег &img> может быть задан:

• Как в HTML поставить картинку
• Как вставить картинку на сайт с помощью html
• Как вставить картинку в html

• Как вставить картинку в текст html
• Как вставить изображение в html
• Как html перевести в картинку
• Как сделать рисунок на сайте
• Как добавить рисунок на сайт
• Как на сайте вставить рисунок в рисунок
• Как вставить картинку на страницу сайта
• Как вставить изображение на страницу
• Как вставить картинку сбоку от текста
• Как вставить картинку на сайт
• Как поместить картинку
• Как получить html-код для картинки
• Как сделать ссылку картинкой
• Как в html уменьшить картинку
• Как вставить изображение на сайт
• Как изменить картинку на сайте
• Как поместить картинку на сайт
• Как на страницу вставить фото
• Как поставить свою картинку на сайте
• Как узнать html код для картинки
• Как вставить картинку на главную страницу
• Как сделать всплывающую картинку
• Как вставить файл на html страницу
• Как вставить логотип в сайт

Приветствую, Друзья. В прошлой статье я рассказывал, как закруглить углы элементов, используя CSS. И чтобы «добить» эту тему до конца решил написать этот небольшой пост, который хочу посвятить тому, как сделать круглые изображения, используя CSS и не только. При чем здесь прошлая статья? Да при том, что круглые изображения делаются тем же свойством, что и закругленные углы, только значения будут отличаться от тех, что были использованы в прошлый раз.

Для понимания этой статьи, я рекомендую Вам прочитать прошлый пост, который поможет лучше ориентироваться в теме.

Как Вы могли заметить, я на блоге использую, как закругленные углы элементов, так и круглые изображения в комментариях. И все это сделано исключительно с помощью CSS3. На мой взгляд, это проще, чем возня с изображениями каждого угла и подгонка их на место. Однако, стоит учитывать, что круглые изображения способны отобразить не все версии веб-браузеров. Конечно, популярные браузеры последних версий справляются с этой задачей без проблем, но с более ранними версиями могут возникать проблемы. Поэтому, мы поговорим и о том, как сделать так, чтобы круглые изображения работали во всех версиях браузеров.

Еще хотелось бы уточнить: Почему именно изображения? На самом деле не только изображения можно сделать круглыми, но и любые другие элементы. Просто мы разберем эту возможность именно на изображениях, так как подобные возможности применяются чаще к различным картинкам на сайте.

Круглые изображения, используя CSS.

Я возьму для примера изображение своего аватара на блоге. Код будет выглядеть следующим образом:

Свойства прописываем с помощью атрибута style , но это только для примера. Правильнее использовать отдельный файл в формате CSS.

Вот так выглядит аватар без каких-либо манипуляций к границам углов:

Как я уже упомянул выше, чтобы сделать картинку круглой мы будем использовать то же свойство, что и при закруглении углов элементов: border-radius . Только в этот раз мы укажем значение в процентах, так как это самый простой способ сделать изображение любого размера круглым, ну или другой элемент, например DIV .

Добавим свойство border-radius , значение которого равно 50 процентам от ширины или высоты элемента:

И тогда аватар станет выглядеть так:

Ну и конечно не забываем о префиксах, которые могут позволить заставить работать некоторые более старые версии веб-браузеров.

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-bottom-left-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.

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

Здесь есть два варианта:

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

Второй: Второй вариант также не всегда применим из-за особенностей дизайна сайта, однако этот вариант гораздо лучше первого.

Заострим взгляд именно на нем. Для осуществления данной манипуляции нам также потребуется графический редактор, например, фотошоп. В котором мы можем сделать изображение цвет границ которого будет совпадать с цветом фона на сайте. А середина изображения будет образовывать прозрачный круг. Предположим, что фон сайта белый.

Для начала откроем графический редактор, который используем и создадим изображение равное размерам в данном случае аватара. То есть 100 на 100 пикселов. Я буду показывать на примере графического редактора фотошоп.

Для начала нажимаем сочетание клавиш Ctrl+N . Появится окошко в котором мы можем задать параметры создаваемого изображения. В данном примере я создам изображение с одинаковыми сторонами равными 100 пикселам и прозрачным фоном.

После этого, заливаем изображение нужным цветом, в зависимости от цвета фона Вашего сайта. В нашем случае это будет белый. Для этого нажимаем сочетание клавиш Shift+F5 , появится окошко, где в поле «Использовать» необходимо выбрать «Цвет…», и выбрать нужный цвет заливки. Помимо этого, необходимо снять галочку «Сохранить прозрачность», если она стоит

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

Теперь остается последний шаг. Нам необходимо вырезать середину, чтобы она стала прозрачной. Выбираем инструмент «Овальная область».

После чего этим инструментов выделяем круглую область в центре изображения. По сути, останутся только углы, а середина и края картинки станут прозрачными. Но по краям также можно оставить немного фона, например один пиксель. Здесь дело лично каждого, как сделать круг. Учтите, что круг, который мы сейчас выделим, и будет образовывать круглое изображение на сайте. Вот что получилось у меня.

После того, как нужная область выделена, просто нажимаем на кнопку Delete и сохраняем изображение в формате PNG , чтобы сохранить его прозрачность. Конечный результат должен быть примерно таким:

Теперь полученную картинку заливаем на сервер, с помощью ftp-клиента. Самым удобным вариантом залить туда, где у вас будут находиться изображения, которые нужно сделать круглыми. Теперь остается наложить это изображение на нужную картинку или элемент. В моем случае — это аватар. Для этого немного изменим код:

И получим такой результат:

Обратите внимание, что аватар стал фоном, а изображение, подготовленное в графическом редакторе, стало как бы основным изображением.

Если Вы обратили внимание, в данном примере круг не совсем плавный, но это зависит от качества картинки из фотошоп. Я поставил низкое качество, поэтому края не такие плавные, как хотелось бы.

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

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

спросил 1 год, 7 месяцев назад

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

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

1

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.

Узнать больше.

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

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

 <дел>
                
                    
                
           

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