Как изменить картинку на сайте через код элемента

Для того, чтобы заменить картинку с помощью javascript — вам потребуется знание теории(хотя бы схематично…), как это можно сделать!

Для того, чтобы заменить картинку в javascript надо заменить путь в теге картинки

Скрипт замены картинки javascript .

Далее нам нужен способ, с помощью которого, в реальном времени, т.е. при нажатии, — пусть это будет кнопка button произойдет замена содержания тега картинки на другой путь, к новой картинке. Для этого нам потребуется javascript

Как обратиться к тегу картинки для замены.

Чтобы заменить содержание атрибута src — надо, каким-то образом обратиться к тегу — там есть несколько способов сделать это!

У нас заранее есть выбор, поэтому, мы добавим данному тегу, произвольный id, с произвольным значением : change_image

Пример замены пути картинки пример

Как будем менять содержание тега src!?

Сделаем стенд, на котором вживую покажем, как будет меняться картинка вслед за заменой содержимого внутри тега src

Возьмем выше идущий код и прикрепим к нему кнопку, для смены пути картинки, нажмите по кнопке:

Замена картинки по клику

После того, как вы немного разобрались в теории(или просто прочитали) перейдем к созданию реального примера замены картинки по клику!

Для этого вам понадобится:

Код замены картинки по клику

Описание всего кода замены картинки вы сделали, теперь соберем его:

Пример замены картинки по клику

Код «замены картинки по клику» картинки я вывел выше, теперь выведем данный код прямо здесь:

Для смены изображения по клику по кнопке, нажмите Смени картинку javascript

Простой слайдер на js

Сделаем простой слайдер javascript, проще которого просто не существует! Я так думаю…

Нам понадобится переменная, которая будет равна нулю с самого начала!

var theNum = «0»;

Нам понадобится массив с названием картинок, мы уже выше приводили пути до картинок, отличаются лишь названия внутри пути

let arr = [«day», «evening», «morning», «night»];

Напишем самую простую функцию смены картинки по нажатию, в первой строке, напишем условие, в том случае, когда значение переменной theNum будет равна количеству ячеек в массиве, то приравняем эту переменную к нулю!

if(theNum == arr.length){theNum=»0″;}

При каждом нажатии будем отправлять значение ячейки массива([theNum]) в путь картинки:

change_image_1.src=’https://dwweb.ru/__img/php/img_php/’+arr[theNum]+’.png’;

И в самом низу поставим счетчик нажатий, такая запись theNum++; равнозначна theNum = theNum + 1;:

theNum++;

Соберем нашу функцию:

Итоговый скрипт, смены картинки вкруговую по нажатию

Далее нам понадобится кнопка с вызовом onclick нашей функции, о которой написали выше:

<button onclick=»myFOO()» class=»button «>Смени картинку javascript</button>

В данный скрипт, можно добавить любое количество картинок, просто складываем картинки в одну папку и в массив вписываем название картинки!

Готовый результат: самый простой слайдер на javascript

Слайдер с выбором следующей и предыдущей картинки

Как сделать слайдер -смана картинки предыдущей на следующую и обратно!

Нам понадобится опять тег картинки, но уже две кнопки — смена картинки на следующую, смена картинки на предыдущую:

Сверху мы разобрали пример смены картинки по счету следующую! Нам остается скопировать эту функцию и заменить пару значений!

Если картинка должна показываться предыдущая, значит будем отнимать(theNum—; ), как только дойдем до значения равным -1, то переменной theNum приравняем arr.length -1; — вопрос на засыпку — зачем отняли 1!?

Соберем код смены картинки при клике на одну кнопку выбирается следующая картинка. при выборе кнопки предыдущая картинка — показывается предыдущая:

Добавление изображений на страницу — типовая задача веб-разработчиков. Её можно выполнить разными способами: вставить картинку в разметку через теги <img>, <svg> или использовать в CSS с помощью background-image.

Вставка изображений в теге <img>

Для каких изображений подходит: для логотипов, фото, иллюстраций, графиков и других контентных изображений.

💡 Контентные изображения тесно связаны по смыслу с содержимым страницы и дополняют его. Например, к таким изображениям относятся фото сотрудников в разделе «О нас» или схема проезда к отелю.

Чтобы вставить изображение с помощью <img>, нужно добавить в тег четыре обязательных атрибута:

• src — указывает путь до картинки;
• alt — добавляет альтернативный текст, который отображается, если изображение не загрузилось;
• width — задаёт ширину изображения;
• height — задаёт высоту изображения.

<img src="images/keks.jpg" alt="Рыжий кот Кекс лежит у ноутбука." width="1024" height="683">

С помощью такого кода можно вставить фото кота Кекса шириной 1024px и высотой 683px.

Вставка через <svg>

Для каких изображений подходит: для векторных в формате SVG.

С помощью этого способа вы можете добавить иконки, чтобы затем менять их состояние.

Иконки добавляются с помощью тега <svg>, в котором прописываются размеры изображения. Например, иконку VK из примера выше можно вставить так:

<a href="https://vk.com/">
  <svg width="30" height="30">
    <path d="..."/>
  </svg>
  <span class="visually-hidden">Вконтакте</span>  
</a>

Небольшое отступление. Возможно, вы не знакомы с классом
visually-hidden — его добавляют элементам, которые нужно скрыть в интерфейсе. В нашем случае <span> с таким классом создаёт подпись «Вконтакте». Её смогут прочитать скринридеры, но не увидят пользователи. Добавлять такие подписи к иконкам — хорошая практика.

Вставка через CSS

Для каких изображений подходит: для декоративных.

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

Есть два способа вставить декоративное изображение: сделать фоном или добавить как псевдоэлемент.

Добавление фоновых изображений

Для добавления фоновых изображений используется CSS-свойство background-image. Вместе с ним нужно прописать размеры изображения — width и height.

Например, на странице есть контейнер с классом .image-container:

<div class="image-container"></div>

Чтобы задать ему фон, нужно написать следующий код:

.image-container {
  background-image: url("images/keks.jpg");
  width: 600px;
  height: 400px;
}

Это минимальный набор CSS-правил. Часто фронтендеры используют дополнительные правила, чтобы изменить позицию и размеры изображения или запретить повтор фоновой картинки.

CSS-свойство background-attachment указывает, что делать с изображением: зафиксировать его позицию в области просмотра или пролистывать вместе с содержимым контейнера.

Его значения:

• scroll — значение по умолчанию. Фон прокручивается вместе с содержимым.
• fix — фон фиксируется.
• local — фон фиксируется с учётом содержимого элемента.

CSS-свойство background-position управляет расположением фона по осям X и Y, то есть по вертикали и горизонтали. Ему можно задавать значения, используя ключевые слова, процентные значения или конкретные величины, например, 100px.

Ключевые слова для расположения по оси X:

• right — право;
• left — лево.

Ключевые слова для расположения по оси Y:

• top — сверху;
• bottom — снизу.

Можно сочетать разные значения:

background-position: 100px top; /* фон отступит 100px от левого края, останется сверху*/
background-position: 50% bottom; /* фон будет посередине и снизу*/
background-position: left 100px; /* фон будет слева и отступит 100px от верхнего края*/

Если нужно задать положение только по одной оси, используйте свойства background-position-x и background-position-y. Они принимают такие же значения, как и background-position.

Следующее CSS-свойство — background-repeat, оно задаёт повтор изображения. По умолчанию у свойства стоит значение repeat, то есть фоновое изображение повторяется по вертикали и горизонтали:

Чтобы изменить это поведение, надо поменять значение:

• no-repeat — не повторять изображение,
• repeat-x — повторять только по горизонтали
• repeat-y — повторять только по горизонтали.

CSS-свойство background-size определяет размеры изображения. Ему также можно задавать значения в виде ключевых слов, процентов или конкретных размеров.

background-size: /*размер по ширине*/ /*размер по высоте*/

Ключевые слова:

• auto — оставляет исходный размер изображения.
• contain — масштабирует изображение по ширине или высоте, чтобы оно заполнило контейнер. Картинка при этом не обрезается.
• cover — масштабирует изображение, сохраняя пропорции изображения. Картинка может обрезаться.

Чтобы было понятнее, посмотрим на примере. Оранжевыми рамками выделена область контейнера. Когда мы задали свойство background-size со значением contain, картинка заполнила всю высоту контейнера и осталась целой.

А когда мы задали cover, фото Кекса обрезалось и растянулось на всю ширину контейнера.

Есть и другие CSS-свойства. Почитайте о них в спецификации W3C.

При использовании фоновых изображений обязательно добавляйте цветной фон-подложку, особенно если у вас на сайте белый текст. Это важно, ведь у пользователей может быть плохое интернет-соединение, при котором картинки долго загружаются. Тогда посетители сайта увидят белый текст на белом экране.

Использование псевдоэлементов

Небольшие декоративные элементы добавляются с помощью псевдоэлементов ::before и ::after. Эти псевдоэлементы создают внутри элемента псевдотег, который можно стилизовать. Например, вы можете добавить ему фоновое изображение или текст.

💡 Этот псевдотег — виртуальный, вы не увидите его в разметке сайта.

Псевдоэлемент ::before добавляет псевдотег в начале, ::after — в конце. Вот пример использования псевдоэлемента на сайте HTML Academy. Перед вами блок с тремя тегами <p>. В каждом из них лежат <strong> для важных цифр и <span> для обычного текста. Когда мы добавляем абзацу ::before, внутри <p> появляется ещё один псевдотег — с картинкой.

Принцип добавления картинки похож на тот, что мы рассматривали при вставке фоновых изображений. Только здесь мы добавляем фон не контейнеру, а псевдотегу:

<p class="wrapper">
  <! -- псевдоэлемент с фоновой картинкой -->
  <srtong>1507</strong>
  <span>Заданий и испытаний</span>
</p>

.wrapper::before {
  content: "";
  width: 600px;
  height: 400px;
  display: block;
  background-image: url("images/keks.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

Разберём, что мы делаем.

Указываем содержимое. Мы используем свойство content с пустым значением, чтобы псевдоэлемент отобразился на странице. Обычно значением этого свойства является текст, но так как нам нужна только фоновая картинка, ставим значение "".

Делаем псевдоэлемент блочным. Прописываем размеры: ширину и высоту.

Добавляем фон. Указываем путь до картинки, убираем повтор и размещаем изображение по центру.

Заключение

Мы рассмотрели четыре основных способа вставки изображения. Первый выглядит самым простым, но он не всегда уместен. Поэтому выбирайте метод вставки, ориентируясь не на простоту работы, а на задачу и тип изображения. Например, логотип лучше добавлять с помощью <img>, а красивую фоновую картинку можно вставить с помощью
background-image.

Следуйте этому правилу, и пользователи полюбят ваш сайт.

Другие статьи о графике

• Как отличить контентное изображение от декоративного
• Растровая и векторная графика
• Как вставлять SVG
• Где скачать бесплатные фотографии для сайта

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

Содержание:

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

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

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

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

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

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, что является ошибкой. Ведь такой папки у нас нет.

Инструменты разработчика в браузерах очень мощные. Они помогут отредактировать страницу прямо в браузере, даже не особо зная, что такое HTML. Можно заменять текст, картинки, передвигать целые блоки на лету, т.е. прямо в браузере, не сохраняя никаких файлов. Правда, эти изменения носят временный характер: при обновлении страницы изменения пропадают.

Инструменты отлично подходят, когда хочется “попробовать, как это выглядит”.

В этой статье мы пользуемся браузером Google Chrome, но в других браузерах всё работает схожим образом.

Поменять текст

Чтобы заменить любой текст на странице, достаточно кликнуть правой клавишей мыши по нужному тексту и выбрать “Просмотреть код”. Откроется код этого элемента, где вы сразу увидите нужный текст. Кликните по нему дважды, чтобы заменить. При нажатии на Enter вы увидите, что текст поменялся и на странице.

Попробуйте повторить приём ниже. Где пробовать.

Поменять картинку

Чтобы заменить картинку, нужно найти её путь: обычно это какая-то длинная ссылка внутри элемента с названием img. Довольно просто, ничем не отличается от смены текста.

В примере ниже мы задумали у второго урока поставить такую же картинку, как у первого. Попробуйте повторить приём ниже. Где пробовать.

Обратите внимание на прикольную фичу: при наведении на ссылку Chrome показывает миниатюрку картинки, которая лежит по этой ссылке. Мелочь, а приятно.

Найти блок вёрстки

Весь HTML устроен иерархически: большие элементы на странице складываются из элементов поменьше, а те, в свою очередь, тоже делятся на части и так пока не дойдёт дело до самых простых элементов на странице — текста, картинок и прямоугольников. Например, на странице Энциклопедии Девмана есть строка, в которой лежит 3 списка из рубрик энциклопедии.

Видно, что они “вложены” в строку — при желании их можно “свернуть”:

При наведении на строчки элементы на странице будут выделяться синим. Чтобы выделить весь элемент поднимайтесь “наверх” по коду, пока он не выделится целиком. Если выделилось слишком много, то вы поднялись слишком высоко, теперь спускайтесь обратно. Перемещайтесь по элементам, пока не найдете нужный.

Найденный элемент можно отредактировать прямо в браузере, выбрав в контекстном меню Edit as HTML. Правда, в файл изменения не попадут. Ещё можно разом скопировать весь блок с вложенными в него элементами или даже удалить их все. О том как это сделать читайте ниже.

С инструментами разработчика любой блок на странице сайта найти проще простого, но вот повторить трюк с текстовым редактором и HTML файлом будет куда сложнее. Ориентируйтесь по названию тега, его классам и его родителям. Например:

<body>
    <article>
        ...
        <div class="row js-article-content">

С помощью инструментов разработчика вы поняли, что вам нужен элемент <div class="row js-article-content">. Значит в файле надо искать тег div с классами row и js-article-content и с родителями body и article. Задача сильно упростится, если в редакторе свернуть часть кода, в англоязычном интерфейсе этот приём называется code folding.

Помните, что на странице может быть много одинаковых с виду элементов, с одинаковым тегом и классами. Ориентируйтесь прежде всего на родителей — внутри каких элементов он находится. Начинайте поиск с тега <body> — этот элемент на странице всегда один и находится на самом верху.

В коде теги ищут по их родителям

Скопировать элемент

Если вы уже нашли элемент через инструменты разработчика, то кликните по нему правой кнопкой мыши и в выпадающем меню выберите Copy outerHTML. HTML разметка скопирована в буфер обмена, теперь можете вставить её в текстовый редактор.

Удалить элемент

Чтобы удалить элемент, нужно так же кликнуть по нему правой кнопкой мыши и выбрать “Просмотреть код”. Далее выберите его целиком. Когда вы выберете нужный элемент — жмите Delete.

В этой гифке мы задумали удалить вторую статью “Как установить Python”. Попробуйте повторить приём ниже. Где пробовать.

В гифке видно, как мы “поднимаемся” наверх, выделяя всё больше. Как только “поднялись” достаточно — свернули всё, что внутри с помощью “стрелочки” слева. Стало видно, что некие li — это элементы списка (на самом деле это list item), а в некоем ul лежит весь список (это unordered list).