Как в html сделать картинку круглой | Уроки HTML, CSS
Для чего обычно используют круглые картинки, ну например, их используют в виде аватарок. То есть, когда вы, например, заполняете свой профиль на сайте, то обычно ваша картинка отображается круглой. Смотрится это стильно и все к этому привыкли.
Поэтому, если вы хотите на сайте отобразить вашу картинку круглой, то вы должны сделать следующие шаги:
1. Конечно же, выбираем картинку.
2. Скачем картинку к себе в папку сайта.
3. Обрезаем картинку под размер, например, видимой части, т.е. обрезаем прямоугольник вокруг головы на картинке.
4. Вставляем на наш сайт тег image - [img].
5. В теге img, указываем в src (от анг. source - источник), название нашей картинки.
6. Добавляем к тегу img стиль, который естественно прописываем style=”” и в кавычках указываем border-radius: 50%, применение этого стиля и закруглит все наши углы картинки на 50%, то есть она станет круглой.
пример, было: [img src=““ alt=““]
пример, стало: [img src=““ alt=““ style=“border-radius: 50%;“]
Если Вам понравилась публикация, подписывайтесь на канал, за Ваши лайки чаще показывают Наши публикации.
Если есть вопросы или пожелания, то пишите, в комментариях.
#школа #программирование #образование #технологии #сайт #обучение #html #уроки #видеоурок #картинка #круглая #аватар
Подписывайтесь на наш канал в YouTube:
Вступайте в нашу группу ВК:
Задавайте вопросы – постараюсь ответить 😊
Удачи в таких классных начинаниях!
Внимание: в YouTube вместо треугольных скобок публикуются квадратные! Для использования в коде, используйте треугольные скобки!
1 view
173
38
2 months ago 00:27:12 1
Обновления для Библии | Атеистический дайджест #469
2 months ago 00:59:13 1
Как взять себя в руки, когда жизнь рушится? Сильная История Эльмиры | Гуру без Цензуры
2 months ago 00:02:14 1
КАК СТАТЬ ПАРТНЁРОМ МАТРЁШКА РП НАЧАЛ СОТРУДНИЧАТЬ С Matrehka rp
2 months ago 00:06:09 1
Зачем русские монахи вышли на Куликово поле. Протоиерей Андрей Ткачёв. «Святая Правда». «Царьград ТВ»
2 months ago 00:00:58 1
🌺 «Он видел БОГОРОДИЦУ вживую, вот что он сказал о Ней...» • Св. Дионисий Ареопагит
2 months ago 00:08:01 1
90 летний Доктор Раскрыл Секрет, как он Чистит Сосуды Мозга и сохраняет Ясность Ума Лучше Лекарств!
2 months ago 00:01:29 1
Как исправить ошибку “Память не может быть written“
2 months ago 00:00:54 1
Почему государственные программы России никем не финансируются #кирбирева #галко #экономика #россия
2 months ago 00:09:18 1
Какой же у меня внук хороший... НЕ ВНУК А ПЯТЬ МИЛЛИОНОВ РУБЛЕЙ!
2 months ago 00:27:05 1
ЖАЛЬ, ЧТО ЭТО НЕ ЗНАЮТ ВСЕ...
2 months ago 00:00:00 1
World of Warcraft | Sirus-x1 | Качаю паладина Рестрим на Twitch VK Play #exizor #wow #sirus
2 months ago 01:31:41 1
ВАДИМ САМОЙЛОВ о судьбе «Агаты Кристи», культуре протеста, патриотизме и поиске истины
2 months ago 01:48:02 1
Закулисье власти России. Информация, которую боится каждый чиновник.
2 months ago 00:02:10 1
не плачь - логинова валентина
2 months ago 08:24:31 1
ВОЗДЕЙСТВИЕ | Все серии документального фильма-расследования
2 months ago 00:15:18 1
“Контрольный выстрел“ от
2 months ago 00:15:34 1
Как погибли Конфедеративные Штаты Америки. ⚔️ Гражданская война в США (Часть2)