HTML, как вставить картинку

Чтобы вставить картинку в HTML документ, используют тег <image>. У этого тега — два ключевых атрибута:

• src — определяет путь к файлу картинки.
• alt — устанавливает альтернативный текст. Он будет отображаться на странице, если картинка окажется недоступна и браузер не сможет ее показать пользователю.

Как использовать локальную картинку с сервера

Если картинка, которую ты хочешь использовать лежит на том же сервере, что и HTML документ, то можно указать относительный путь.

<img src='/images/my_cool_image.jpg' alt='My Cool Image!'>

Как вставить картинку в HTML по URL ссылке

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

<img src='https://learn.coderslang.com/js-test-3.png' alt='JavaScript Interview Question #3'>

Как изменить ширину и высоту картинки в HTML

Все что связано со стилизацией картинки, можно сделать с помощью CSS. Например, если мы хотим растянуть картинку по всей ширине экрана (или родительского контейнера), мы можем сделать так:

img {
  width: 100%;
}

Но такой подход повлияет на все картинки на сайте.

Если тебе нужно изменить размеры только одной картинки, то можно добавить ей id.

<img id=test src='https://learn.coderslang.com/js-test-3.png' alt='JavaScript Interview Question #3'>

И сделать CSS селектор по этому id.

#test {
  width: 100%;
}

Использование атрибутов width и height

Кроме CSS, изменить размер картинки в HTML можно добавив атрибуты width и height просто к тегу <image>.

<img src='https://learn.coderslang.com/js-test-3.png' alt='JavaScript Interview Question #3' width=600 height=400>

Но такой подход менее универсален, чем CSS.