Как добавить картинку на веб-страницу?
В примере 1 на веб-страницу добавляется графический файл dzen.png, расположенный в папке image.
Пример 1. Добавление изображения через
Результат данного примера показан на рис. 1.
Рис. 1. Изображение на веб-странице
См. также
- Атрибуты элементов
- Выравнивание картинок
- Добавление медиа-контента
- Изображения
- Изображения
- Изображения в Bootstrap 5
- Изображения в HTML
- Масштабирование картинок
- Подрисуночная подпись
- Фон в CSS
- Форматы графических файлов
Как добавить изображение на страницу
Добавление изображений на страницу — типовая задача веб-разработчиков. Её можно выполнить разными способами: вставить картинку в разметку через теги , или использовать в CSS с помощью background-image .
Вставка изображений в теге
Для каких изображений подходит: для логотипов, фото, иллюстраций, графиков и других контентных изображений.
�� Контентные изображения тесно связаны по смыслу с содержимым страницы и дополняют его. Например, к таким изображениям относятся фото сотрудников в разделе «О нас» или схема проезда к отелю.
Чтобы вставить изображение с помощью , нужно добавить в тег четыре обязательных атрибута:
- src — указывает путь до картинки;
- alt — добавляет альтернативный текст, который отображается, если изображение не загрузилось;
- width — задаёт ширину изображения;
- height — задаёт высоту изображения.
С помощью такого кода можно вставить фото кота Кекса шириной 1024px и высотой 683px .
Вставка через
Для каких изображений подходит: для векторных в формате SVG.
С помощью этого способа вы можете добавить иконки, чтобы затем менять их состояние.
Иконки добавляются с помощью тега , в котором прописываются размеры изображения. Например, иконку VK из примера выше можно вставить так:
Небольшое отступление. Возможно, вы не знакомы с классом visually-hidden — его добавляют элементам, которые нужно скрыть в интерфейсе. В нашем случае с таким классом создаёт подпись «Вконтакте». Её смогут прочитать скринридеры, но не увидят пользователи. Добавлять такие подписи к иконкам — хорошая практика.
Вставка через CSS
Для каких изображений подходит: для декоративных.
�� Декоративные изображения нужны для украшения страницы. Их отсутствие не поменяет смысл контента, поэтому они имеют только оформительское назначение.
Есть два способа вставить декоративное изображение: сделать фоном или добавить как псевдоэлемент.
Добавление фоновых изображений
Для добавления фоновых изображений используется CSS-свойство background-image . Вместе с ним нужно прописать размеры изображения — width и height .
Например, на странице есть контейнер с классом .image-container :
Чтобы задать ему фон, нужно написать следующий код:
.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. Перед вами блок с тремя тегами
. В каждом из них лежат для важных цифр и для обычного текста. Когда мы добавляем абзацу ::before , внутри
появляется ещё один псевдотег — с картинкой.
Принцип добавления картинки похож на тот, что мы рассматривали при вставке фоновых изображений. Только здесь мы добавляем фон не контейнеру, а псевдотегу:
1507 Заданий и испытаний
.wrapper::before < content: ""; width: 600px; height: 400px; display: block; background-image: url("images/keks.jpg"); background-repeat: no-repeat; background-position: center; >Разберём, что мы делаем.
Указываем содержимое. Мы используем свойство content с пустым значением, чтобы псевдоэлемент отобразился на странице. Обычно значением этого свойства является текст, но так как нам нужна только фоновая картинка, ставим значение «» .
Делаем псевдоэлемент блочным. Прописываем размеры: ширину и высоту.
Добавляем фон. Указываем путь до картинки, убираем повтор и размещаем изображение по центру.
Заключение
Мы рассмотрели четыре основных способа вставки изображения. Первый выглядит самым простым, но он не всегда уместен. Поэтому выбирайте метод вставки, ориентируясь не на простоту работы, а на задачу и тип изображения. Например, логотип лучше добавлять с помощью , а красивую фоновую картинку можно вставить с помощью background-image .
Следуйте этому правилу, и пользователи полюбят ваш сайт.
Другие статьи о графике
- Как отличить контентное изображение от декоративного
- Растровая и векторная графика
- Как вставлять SVG
- Где скачать бесплатные фотографии для сайта
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
как поменять картинку js
Для того, чтобы поменять картинку нужно изменить атрибут src у элемента на новый путь к картинке.
id="myImg" src="old-image.jpg" alt="Old Image"> onclick="changeImage()">Change Image function changeImage() const myImg = document.getElementById('myImg'); myImg.src = 'new-image.jpg'; > /scirpt> В результате выполнения кода выше, картинка на странице будет заменена на новую.
Как изменить картинку на сайте при определенном разрешении?
Необходимо, чтобы при мобильном разрешении была одна картинка, а при десктопном разрешении — другая. Как это можно осуществить?
Отслеживать
10.5k 7 7 золотых знаков 25 25 серебряных знаков 41 41 бронзовый знак
задан 28 июл 2017 в 13:27
123 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков
гуглить css media queries
28 июл 2017 в 13:35
Что именно за картинка? Фон или img?
28 июл 2017 в 13:37
Картинка img,не фон
28 июл 2017 в 13:49
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Медиа-запрос
Допустим, по дефолту имеем background-image:url(«images/main.png»); И определяем медиа-запрос для девайсов с разрешением от 320 до 500 пикселей:
@media (min-width:320px) and (max-width:500px) < .your-block < background-image:url("images/mobile.png"); >> Если нужно, чтобы менялась именно содержательная картинка(вставленная с помощью тега img в ваш html — алгоритм тот же, только у вас должно быть две картинки, допустим одна имеет класс mobile-img , вторая соответственно main-img . И получаете что-то вроде вот такого css
.mobile-img < display:none; >@media (min-width:320px) and (max-width:500px) < .mobile-img < display:block; >.main-img < display: none; >> Отслеживать
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
ответ дан 28 июл 2017 в 13:37
Klimenko Kirill Klimenko Kirill
2,226 1 1 золотой знак 11 11 серебряных знаков 37 37 бронзовых знаков
Я бы использовал js, чтобы не грузить большие картинки на мобильные
28 июл 2017 в 16:15
Можно и так, но это ведь уже вопрос опитимизации)
28 июл 2017 в 16:21
Смотрите в сторону атрибутов srcset, sizes у элемента img или используйте возможности элемента picture. Элемент picture имеет более «продвинутые» возможности.
Можно не только изменять (увеличивать или уменьшать) фактический размер картинки при различных плотностях или разрешения экрана устройства, но, например, отобразить вместо альбомной картинки — картинку портретной ориентации, что порой бывает полезно при создании адаптивного/отзывчивого сайта или приложения.
Поддержка браузерами srcset и picture.
Но там где возможно, например для логотипа, лучше использовать векторный формат изображений — SVG. Формат широко поддерживается браузерами.