Работа с картинками в HTML и CSS

Этот урок посвящен теме как вставить картинку в HTML и какие стили CSS наиболее часто применяются для изображений. Здесь мы рассмотрим все основные вопросы касаемо вставки и отображения картинки в веб-документе. А также рассмотрим причины почему у некоторых пользователей не отображается картинка в HTML.

Содержание:

  1. Как вставить картинку в HTML
  2. Как изменить размер картинки в HTML
  3. Как указать путь к файлу изображения
  4. Как сделать картинку ссылкой
  5. Как поставить на фон картинку
  6. Как установить размер картинки в CSS
  7. Как сделать картинку адаптивной
  8. Как разместить текст на картинке
  9. Как выровнять картинку по центру веб-страницы
  10. Как сделать обтекание картинки текстом
  11. Как выстроить картинки в ряд
  12. Как изменить размер картинки при наведении на неё курсора мыши
  13. Почему не отображается картинка в HTML

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

В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега <img> через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента <img>. Без него этот тег не используют.

Ещё одним обязательным атрибутом элемента <img> является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.

В таблице ниже представлены атрибуты тега <img>, которые используются наиболее часто. Но на самом деле их намного больше, ведь для элемента <img> доступны все универсальные атрибуты и события.

Таблица. Основные атрибуты элемента <img>

Атрибут Описание Пример
alt Добавляет альтернативный текст для изображения. Этот текст выводится в месте появления изображения до его загрузки, или если картинка не может быть загружена (Например, при отключенной графике, или указан неверный путь к изображению). <img src="/D-Nik-Webmaster.jpg" alt="Здесь должна быть картинка">
height Высота изображения в пикселях (px). Если задать высоту изображения и при этом не указывать ширину, то картинка будет сжата пропорционально. <img src="/D-Nik-Webmaster.jpg" height="300">
src Задает путь к изображению. <img src="/D-Nik-Webmaster.jpg">
sizes Задаёт размер изображения в зависимости от параметров отображения (размеры изображения для разных макетов страницы).
Работает только при заданном атрибуте srcset.
Значением атрибута является одна или несколько строк, указанных через запятую.
В качестве значений можно использовать единицы em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px, но не проценты.
sizes="
(max-width: 20em) 30vw,
(max-width: 30em) 60vw,
(max-width: 40em) 90vw"
Здесь vw — это ширина в процентах от области просмотра.
srcset Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе с атрибутом src, или вместо него. Значением этого атрибута является одна или несколько строк, разделенных запятой.

srcset="
img/logo-mobile.jpg 320w,
img/logo-wide-mobile.jpg 480w,
img/logo-tablet.jpg 768w,
img/logo-desktop.jpg 1024w,
img/logo-hires.jpg 1280w"

Здесь w - дескриптор ширины, который представляет собой целое положительное число, за которым следует w.

width Ширина изображения. Если задать ширину изображения и при этом не указывать высоту, то картинка будет сжата пропорционально. <img src="/D-Nik-Webmaster.jpg" width="300">

HTML картинка. Примеры

Как добавить картинку в HTML?

Как уже говорилось, чтобы добавить картинку в HTML нужно использовать тег <img> и его обязательные атрибуты src и alt. Также, поскольку тег <img> – это строчный элемент, то его рекомендуется располагать внутри какого-нибудь блочного элемента. Например, <p> или <div>.

<p><img src="/D-Nik-Webmaster.jpg" alt="Здесь должна быть картинка"></p>

Как изменить размер картинки в HTML?

Чтобы изменить размер изображения используют атрибуты height (задаёт высоту картинки) и width (задаёт ширину картинки). Эти атрибуты можно указывать как вместе, так и по отдельности.

Если нужно пропорционально сжать картинку, то указывается только один атрибут (height, или width). Если же нужно чётко обозначить и высоту, и ширину картинки, то используют оба атрибута одновременно (height и width).

<p><img src="/D-Nik-Webmaster.jpg" height="300" width="300"></p>

Как указать путь к файлу изображения в HTML?

Адрес ссылки на файл изображения может быть абсолютным и относительным.

Абсолютный путь показывает точное местонахождение файла, а относительный показывает путь к файлу относительно какой-либо «отправной точки».

Примеры:

https://site/img/D-Nik-Webmaster.jpg – это абсолютный адрес файла D-Nik-Webmaster.jpg так как путь к нему указан полностью.

/img/D-Nik-Webmaster.jpg – это относительный путь от корневого каталога. Знак «/» в самом начале указывает на то, что это корень каталога и выше по директории подниматься нельзя. Если файл index.html (HTML-документ) находится в каталоге site, то этот каталог будет корневым («отправной точкой»).

../img/D-Nik-Webmaster.jpg – это относительный путь от документа. Две точки в самом начале означают, что вам нужно подняться на один каталог вверх. Таким образом, если смотреть на наш пример, то нужно подняться на 1 директорию вверх, найти там папку img, а в ней найти файл D-Nik-Webmaster.jpg.

../../D-Nik-Webmaster.jpg – указывает путь к файлу, но только с поднятием на 2 директории вверх.

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

Для того, чтобы сделать картинку ссылкой в HTML нужно содержимое элемента <img> обрамить в тег <a>.

<p><a href="https://d-nik.pro"><img src="/D-Nik-Webmaster.jpg" alt="Картинка тут"></a></p>

Картинка CSS. Примеры

Использование CSS (каскадных таблиц стилей) даёт возможность более гибко, более удобно и эффективно, настраивать отображение картинок на веб-странице. Поэтому даже для того, чтобы задать ширину и высоту изображений многие веб-мастера часто используют именно каскадные таблицы стилей.

Давайте рассмотрим несколько самых распространённых примеров оформления изображений на веб-странице с помощью CSS.

Как поставить на фон картинку в HTML?

Чтобы установить изображение в качестве фона нужно задать селектору body свойство background, или background-image.

Например:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        body{
            background: url('img/bg.jpg'); /* путь к файлу изображения, которое будет использоваться в качестве фона */
        }
    </style>

    <title>Как поставить на фон картинку в HTML</title>
</head>
<body>
    <p>Здесь будет написан какой-нибудь текст</p>
</body>
</html>

Как установить размер картинки в CSS

Чтобы задать размер картинки в CSS нужно использовать свойства width (ширина) и height (высота). Например:

  1. Давайте создадим новый класс imgsize.
  2. Для элементов этого класса пропишем свойство width равным 350px.
  3. Присвоим картинке созданный ранее класс imgsize.

Таким образом, ширина картинки будет равна 350px, а высота уменьшится пропорционально. Если нужно установить фиксированную ширину и высоту картинки, то можно добавить свойство height (Например, height:350px).

Пример кода:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .imgsize{
            width: 350px; /* ширина картинки будет 350px*/
            height:350px  /* высота картинки будет 350px*/
        }
    </style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
    <p><img class="imgsize" src="/img/bg.jpg" alt="Картинка">Здесь будет написан какой-нибудь текст</p>
</body>
</html>

Как сделать картинку адаптивной

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

Самый простой способ сделать одинаковое отображение картинки на всех устройствах – это использовать следующие правила:

img {
  width: 100%;
  height: auto;
}

Как разместить текст на картинке

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	/* Картинку и текст помещаем в контейнер */
	.container {
		position: relative;
		text-align: center;
		color: white;
	}
	/* Стили для текста */
		.text-block {
		position: absolute;
		bottom: 8px;
		left: 16px;
	}
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<div class="container">
		<img src="/img/bg.jpg" alt="Картинка" style="width:100%;">
		<div class="text-block">Это наш текст</div>
	</div>
</body>
</html>

Как выровнять картинку по центру веб-страницы

Способ №1

Самый простой способ выровнять картинку по центру – это присвоить ей класс, сделать картинку блоком и задать ей автоматическое выравнивание с правой и левой части.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	/* Способ 1 */
	.center-img {
		display: block;
		margin: 0 auto;
	}
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
		<img class="center-img" src="/img/logo.jpg" alt="Картинка">
</body>
</html>

Способ №2

Помещаем картинку в блок <div> или параграф <p>, присваиваем класс этому блоку (или параграфу), и устанавливаем правило выравнивание текста по центру.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	/* Способ 1 */
	.pull-center {
		text-align:center;
	}
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<div class="pull-center">
		<img src="/img/logo.jpg" alt="Картинка">
	</div>
</body>
</html>

Как сделать обтекание картинки текстом

Выровнять изображение по левому, или по правому краю веб-страницы (или какого-нибудь блока, контейнера) можно с помощью свойства float.

Таким образом, чтобы сделать обтекание картинки текстом слева или справа нужно прописать следующие правила:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.leftimg {
                 float:left; /* Выравнивание по левому краю */
                 margin: 0 10px 10px 0; /* Отступы вокруг картинки */
              }
              .rightimg  {
                float: right; /* Выравнивание по правому краю  */ 
                margin: 0 0 10px 10px; /* Отступы вокруг картинки */
              }
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<h2>Пример выравнивания картинки по левому краю и обтекания её текстом справа</h2>
	<p><img src="/img/logo.jpg" alt="Картинка 1" width="120px" height="120px" class="leftimg">
    Если ты сейчас читаешь мою книгу, или просматриваешь этот материал на сайте www.d-nik.pro, значит, тебя интересует создание сайтов для начинающих с нуля. И так как HTML является самой важной составляющей каждой веб-страницы в интернете, изучение мы начнем именно с этого языка.</p>
	<p>Здесь хочу отметить, что HTML не является языком программирования. Это язык гипертекстовой разметки. Поэтому, в ходе прочтения данной книги, термин «язык HTML» будет встречаться тебе очень часто, но нужно понимать, что на HTML не программируют.</p>
	<p>Главная задача HTML – отобразить в окне браузера определенные данные. С помощью этого языка веб-разработчики выводят на странице сайта такие элементы как: ссылки, кнопки, поля для ввода текста, таблицы, картинки, видео, статьи и прочее.</p>
    <h2>Пример выравнивания картинки по правому краю и обтекания её текстом слева</h2>
	<p><img src="/img/logo.jpg" alt="Картинка 2" width="120px" height="120px" class="rightimg">
    Но с помощью HTML нельзя произвести никаких вычислительных операций (Например, сложить два числа, или произвести их умножение и т.д.).</p>
	<p>Отсюда и вывод. Задача языка программирования – обработка данных. А задача HTML – отображение данных. Вот поэтому HTML и не является языком программирования.</p>
	<p>Хотя, как и любой другой язык программирования, HTML имеет свой синтаксис, семантику и лексику. И знание HTML позволяет создавать сайты с нуля. Даже на чистом HTML (без использования CSS и JavaScript) можно создать вполне приличный одностраничный сайт. Хотя конечно же сделать это используя все вместе (HTML, CSS и JavaScript) будет намного проще.</p>
	<p>Но я считаю, что для того, чтобы научиться создавать свои собственные сайты с нуля, нужно знать основы-основ – а это как раз и есть язык HTML.</p>
</body>
</html>

Как выстроить картинки в ряд

Чтобы выстроить картинки по горизонтали в один ряд, нужно поместить их в блок <div> или параграф <p>, присвоить класс этому блоку (или параграфу), и установить следующие правила:

.img-line {
		border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
		padding: 15px; /* Расстояние от картинки до рамки */
		background: #666; /* Цвет фона */
		margin-right: 10px; /* Отступ справа */
		margin-bottom: 10px; /* Отступ снизу */
    }

 Весь код будет выглядеть так:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.img-line {
		border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
		padding: 15px; /* Расстояние от картинки до рамки */
		background: #666; /* Цвет фона */
		margin-right: 10px; /* Отступ справа */
		margin-bottom: 10px; /* Отступ снизу */
    }
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<p class="img-line">
	<img src="/img/logo.jpg" alt="Картинка 1" width="120px" height="120px">
	<img src="/img/logo.jpg" alt="Картинка 2" width="120px" height="120px">
	<img src="/img/logo.jpg" alt="Картинка 3" width="120px" height="120px">
	</p>
</body>
</html>

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

Изображение можно масштабировать (изменять его размер), вращать, сдвигать, или наклонять с помощью свойства transform. А для регулирования скорости анимации используется свойство transition.

Например, если нам нужно, чтобы картинка увеличивалась (или уменьшалась) при наведении на неё курсора мыши, то нужно создать класс, присвоить его изображению и прописать следующие правила CSS:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.img-scale {
		transition: 1s; /* Время эффекта */		
    }
	.img-scale:hover {
		transform: scale(1.2); /* Увеличиваем масштаб */		
    }
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<img src="/img/logo.jpg" alt="Картинка" class="img-scale">
</body>
</html>

Если нужно увеличить изображение, не увеличивая при этом размеры картинки, то картинку надо поместить в блок <div>. Для этого блока задать свойство display со значением inline-block, чтобы <div> стал размером с изображение; а также задать свойство overflow со значением hidden, чтобы всё пряталось за пределами блока <div>.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.img-scale {
    display: inline-block; /* Строчно-блочный элемент */
    overflow: hidden; /* Скрываем всё за контуром */
   }
   .img-scale img {
    transition: 1s; /* Время эффекта */
    display: block; /* Убираем небольшой отступ снизу */
   }
   .img-scale img:hover {
    transform: scale(1.2); /* Увеличиваем масштаб */
   }
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<div class="img-scale">
	<img src="/img/logo.jpg" alt="Картинка">
	</div>
</body>
</html>

Почему не отображается картинка в HTML?

Причин почему картинка не отображается на веб-странице может быть несколько:

  1. Неверный адрес файла. Чаще всего, картинка на сайте не показывается из-за того, что в HTML коде указан не верный путь к файлу изображения. Особенно внимательным нужно быть при составлении относительного пути к файлу. О том, как указать этот путь правильно мы уже говорили ранее. Поэтому повторяться не будем.
  2. Несовпадение регистра, или неправильное имя файла. С неправильным именем файла думаю всё понятно. Если картинка не отображается, то первым делом проверьте правильно ли вы написали имя файла этого изображения. Также, указывая путь к файлу, обязательно нужно соблюдать регистр букв (маленькие буквы писать маленькими, большие - большими). Ведь если в качестве операционной системы веб-сервера выступает Unix-подобная система, то она различает регистр символов. Поэтому файлы logo.jpg и Logo.jpg (или loGo.jpg) эта система будет распознавать как два абсолютно разных файла. Вот почему я рекомендую постоянно писать имена файлов соблюдая регистр букв.
  3. Разница добавления картинок в HTML-документ на локальном компьютере и веб-сервере. У многих пользователей на веб-сервере, путь /img/logo.jpg отлично работает. А вот на локальном компьютере путь к картинке нужно писать без слеша в самом начале – img/logo.jpg. Cимвол слэш (/) перед именем файла или папки говорит о том, что отсчет должен вестись от корня сайта. Соответственно, путь /img/logo.jpg следует понимать так: в корне сайта находится папка с именем img, а в ней располагается файл logo.jpg. А вот на локальном компьютере браузер будет интерпретировать такой путь как c:/img/logo.jpg, что является ошибкой. Ведь такой папки у нас нет.

АВТОРИЗАЦИЯ