Как в 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 вместо треугольных скобок публикуются квадратные! Для использования в коде, используйте треугольные скобки!
Back to Top