Как в html сделать картинку круглой | Уроки HTML, CSS

Показать описание

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

Поэтому, если вы хотите на сайте отобразить вашу картинку круглой, то вы должны сделать следующие шаги:

1. Конечно же, выбираем картинку.

2. Скачем картинку к себе в папку сайта.

3. Обрезаем картинку под размер, например, видимой части, т.е. обрезаем прямоугольник вокруг головы на картинке.

4. Вставляем на наш сайт тег image - [img].

5. В теге img, указываем в src (от анг. source - источник), название нашей картинки.

6. Добавляем к тегу img стиль, который естественно прописываем style=”” и в кавычках указываем border-radius: 50%, применение этого стиля и закруглит все наши углы картинки на 50%, то есть она станет круглой.

Если Вам понравилась публикация, подписывайтесь на канал, за Ваши лайки чаще показывают Наши публикации.

Если есть вопросы или пожелания, то пишите, в комментариях.

#школа #программирование #образование #технологии #сайт #обучение #html #уроки #видеоурок #картинка #круглая #аватар

Задавайте вопросы – постараюсь ответить 😊
Удачи в таких классных начинаниях!

Внимание: в YouTube вместо треугольных скобок публикуются квадратные! Для использования в коде, используйте треугольные скобки!