Чтобы добавить изображение на сайт с помощью HTML и CSS, следуйте этим простым шагам:
- Скопируйте изображение в папку с вашим проектом.
- Откройте ваш HTML-документ в редакторе кода и добавьте следующий тег
<img>на страницу:
<img src="path/to/image.jpg" alt="описание изображения">В src укажите относительный или абсолютный путь к изображению, в alt укажите описание изображения (для тега <img> описания изображения обязательно, так как это делает ваш сайт доступным для людей с нарушениями зрения).
- Стилизуйте изображение, указав для него CSS-свойства:
img {
width: 100%;
height: auto;
}В этом примере мы установили ширину изображения равной 100% от ширины родительского блока, и высоту автоматически расчитывать, чтобы сохранить соотношение сторон.
Пример с полным кодом:
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<img src="path/to/image.jpg" alt="Описание изображения">
</body>
</html>Заметьте, что вместо path/to/image.jpg нужно подставить соответствующий путь к вашему изображению. Если изображение находится в той же папке, что и HTML-файл, достаточно указать просто название файла и его расширение.
