Проверь что ты задал стиль для img
Все любят картинки! Тег для вставки изображений на страницу.
Время чтения: 7 мин
- Кратко
- Пример
- Как пишется
- Атрибуты
- src
- alt
- width и height
- srcset
- sizes
- loading
- decoding
- Алёна Батицкая советует
- В каких случаях нужно использовать атрибут srcset? Как браузер будет его обрабатывать?
- Алёна Батицкая ,
- Вадим Макеев
- Светлана Коробцева ,
- Никита Дубко ,
- Александр Рассудихин
Обновлено 22 февраля 2023
Кратко
Скопировать ссылку на секцию «Кратко» Скопировано
Тег <img> добавляет изображение на страницу.
Растровые, векторные — любые, поддержка форматов уже зависит от браузера.
Пример
Скопировать ссылку на секцию «Пример» Скопировано
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
Тег <img> одиночный, у него нет закрывающей пары, контент в него не положить.
Ссылка на картинку и другие параметры задаются с помощью атрибутов.
Атрибуты
Скопировать ссылку на секцию «Атрибуты» Скопировано
Скопировать ссылку на секцию «src» Скопировано
Обязательный атрибут. В качестве значения указывается адрес картинки. Абсолютная или относительная ссылка до файла в любом допустимом формате.
Скопировать ссылку на секцию «alt» Скопировано
Тоже обязательный атрибут. Текст в alt называется альтернативным описанием изображения и рассказывает словами, что изображено. Это полезно, если картинка не загрузилась или пользователь не видит изображения.
Если забыть добавить атрибут, то скринридер попытается прочесть название файла: в лучшем случае это будет logo — large , но может быть и b764b84c , что не очень информативно. Если оставить значение атрибута пустым, то скринридер посчитает это изображение декоративным, а не контентным. Если вы добиваетесь именно этого — отлично, но тогда, возможно, стоит вставить его как фоновую картинку с помощью CSS.
Когда картинка по какой-то причине не загружается, браузеры отображают вместо неё альтернативный текст. Его даже можно стилизовать, если задать текстовые стили тегу <img> .
width и height
Скопировать ссылку на секцию «width и height» Скопировано
При помощи атрибутов width и height размеры изображения задаются прямо в HTML. Вы можете спросить: зачем так, ведь стиль нужно задавать с помощью CSS? Это нужно, чтобы избежать прыжков контента при загрузке страницы. Частая ситуация, когда картинка очень тяжёлая, а скорость интернета пользователя невысокая.
Если размеры не заданы в атрибутах, то <img> займёт место как строка текста. После загрузки картинка встанет на страницу, подвинув остальной контент. Пользователей обычно очень раздражают такие скачки. Они теряют место, где читали, а браузеру приходится перерисовывать страницу заново.
- width — ширина изображения в пикселях.
- height — высота изображения в пикселях.
При этом сами единицы измерения px указывать не нужно, браузер поймёт.
srcset
Скопировать ссылку на секцию «srcset» Скопировано
Самый простой способ предложить браузеру версию картинки с повышенным разрешением — указать её в атрибуте srcset :
Для этого не нужен целый элемент <picture> , достаточно атрибута.
Также атрибут srcset можно использовать в сочетании с атрибутом sizes , чтобы подсказать браузеру, какие варианты картинок есть, и помочь ему выбрать подходящие ситуации.
sizes
Скопировать ссылку на секцию «sizes» Скопировано
HTML даёт возможность загружать разные изображения в зависимости от разных условий. Частая ситуация: разные картинки под разные ширины экранов.
Можно делать это при помощи тега <picture> , а можно задать атрибуты srcset и sizes прямо в теге <img> .
- srcset — атрибут, принимающий несколько строк, разделённых запятой. Каждая строка должна содержать ссылку на картинку и указание фактической ширины картинки, значения разделяются пробелом. При этом после ширины ставится единица измерения w, а не px.
- sizes — атрибут, в котором указывается одно или несколько условий через запятую. Каждая строка состоит из медиавыражения и ширины блока для картинки, разделённых пробелом. Ширину блока для картинки можно указывать в любых единицах измерения, кроме процентов.
Как браузер читает эти атрибуты:
- Смотрит на ширину экрана устройства.
- Пытается определить подходящее условие из списка в атрибуте sizes .
- Смотрит на размер блока для изображения к этому медиавыражению.
- Загружает то изображение из списка в srcset , которое имеет тот же размер, что и выбранный слот. Если такого нет, то загрузится первое изображение, которое больше размера выбранного слота.
При чтении кода из примера выше:
- На экранах от 0 до 320 пикселей загрузится logo-small.png.
- На экранах от 321 до 480 пикселей загрузится logo-medium.png.
- На всех прочих ширинах (или если браузер не поддерживает эти атрибуты) загрузится logo-large.png.
Браузер остановит проверку и чтение атрибутов, как только найдёт совпадение с условием. Поэтому располагайте условия от меньших к большим.
loading
Скопировать ссылку на секцию «loading» Скопировано
По умолчанию браузеры читают HTML-код страницы и ставят в загрузку все картинки, которые найдут в тегах <img> . Это хорошо для пользователя, ведь это контент страницы, и его не нужно будет ждать.
Но бывает, что картинок на странице много, и нам нужно как-то подсказать браузеру: вот эти пока не загружай, дождись, пока пользователь до них прокрутит — и можно начать загрузку. В общем, сам разберись. Удобно, правда?
Для этого можно указать поведение картинки в атрибуте loading :
- eager , то есть немедленно (по умолчанию, как если вообще не указывать атрибут);
- lazy , то есть лениво.
Атрибут сравнительно свежий, и стоит свериться с таблицей поддержки, но это не так важно: атрибут loading работает как улучшение, и если браузер его не поддерживает, то ничего не сломается.
decoding
Скопировать ссылку на секцию «decoding» Скопировано
Перед тем, как показать загруженную картинку, браузер декодирует её — превращает набор байтов в набор пикселей по подходящим алгоритмам. Для больших изображений декодирование может занимать сотни миллисекунд, во время которых страница блокируется.
Если изображения не настолько важны, как текст вокруг них, можно попросить браузер декодировать картинки асинхронно. Тогда браузер приступит к их декодированию попозже, когда самое важное уже будет нарисовано. Или наоборот, можно попросить браузер: «Вот эта картинка очень важная, её нужно декодировать прямо сейчас».
Подсказки задаются в атрибуте decoding :
- async — декодировать асинхронно (можно попозже, когда получится);
- sync — синхронно (нужно прямо сейчас);
- auto — автоматически (браузер, решай сам).
Как и атрибут loading , атрибут decoding можно добавлять как прогрессивное улучшение, потому что в старых браузерах ничего не сломается, а в понимающих этот атрибут — станет лучше.
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Картинка может быть ссылкой: для этого оберните <img> в <a> .
�� Всегда прописывайте alt для изображения, которое является частью контента и важно для понимания содержимого страницы. Если пользователь открывает страницу в скринридере, или он отключил изображения, или использует озвучивание текста с экрана, то альтернативный текст подскажет, что изображено на картинке. Для декоративных изображений лучше оставить атрибут alt пустым.
�� Прописывайте ширину width и высоту height изображения, чтобы страница загружалась быстрее. Задавая значения этим атрибутам, не пишите px, только числа.
�� Используйте атрибуты sizes и srcset , чтобы ваша картинка адаптировалась к разным устройствам. Получается красиво, а страница загружается быстрее.
Ещё примеры
Скопировать ссылку на секцию «Ещё примеры» Скопировано
Мы указали картинке её реальные размеры в атрибутах width и height , а потом задали ей резиновую ширину 50%, и чтобы высота была корректной, добавили height : auto — браузер сам подберёт подходящую высоту, он уже загрузил картинку и всё знает.
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
�� Поскольку картинка — строчный элемент, после неё есть небольшой отступ, похожий на пробел между словами. Иногда этот отступ сильно мешает. Но не все начинающие разработчики понимают, как от него избавиться.
Всё просто! Измени поведение картинки со строчного на блочное ( block ) или строчно-блочное ( inline — block ).
�� Частый дизайнерский приём — наложение поверх картинки цветного оверлея. И если для фоновой картинки это можно сделать при помощи псевдоэлемента, то с тегом <img> этот приём не сработает. Для этого элемента невозможно задать псевдоэлемент, так уж устроены замещаемые элементы, вроде <iframe> , <video> , <img> и других.
Чтобы реализовать оверлей, нужно будет завернуть картинку в дополнительный блок-обёртку и уже ей задать псевдоэлемент.
На собеседовании
Скопировать ссылку на секцию «На собеседовании» Скопировано
https://amdy.su/wp-admin/options-general.php?page=ad-inserter.php#tab-8В каких случаях нужно использовать атрибут srcset ? Как браузер будет его обрабатывать?
Скопировать ссылку на секцию «В каких случаях нужно использовать атрибут srcset? Как браузер будет его обрабатывать?» Скопировано
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
Как установить атрибут src тега img через css?
Однако есть альтернативные варианты: background любому элементу либо свойство content в css.
Через css никак. Разве что можете попробовать для img задавать в css background-image .
хоть и грязный трюк — но работает
Через Css нельзя установить src img а можно:
- С помощью div’ов: <div style=»width:40px;height:40px;background-image: url(‘адрес’);»></div>
- На JS используя id: <script>document.getElementById(«ид картинки»).src=»https://ru.stackoverflow.com/questions/95023/%D0%B0%D0%B4%D1%80%D0%B5%D1%81″;</script>
Не знаю, у меня вот так, работает в браузерах (Yandex, Chrome, Opera, Firefox, Maxthon — это те, что проверил)
Ещё один способ (нубам, возвещающим, что через css никак — не смотреть, а то разрыв шаблона 🙂 ) https://css-tricks.com/replace-the-image-in-an-img-with-css/
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.25.43461
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
CSS Styling Images
Use the border-radius property to create rounded images:
Example
Example
Thumbnail Images
Use the border property to create thumbnail images.
Example
img <
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
><img src=»https://www.w3schools.com/CSS/paris.jpg» alt=»Paris»>
Thumbnail Image as Link:
Example
img <
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
>img:hover <
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
>Responsive Images
Responsive images will automatically adjust to fit the size of the screen.
Resize the browser window to see the effect:
If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:
Example
Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.
Center an Image
To center an image, set left and right margin to auto and make it into a block element:
Example
Polaroid Images / Cards
Example
div.polaroid <
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
>div.container <
text-align: center;
padding: 10px 20px;
>Transparent Image
The opacity property can take a value from 0.0 — 1.0. The lower value, the more transparent:
Example
Image Text
How to position text in an image:
Example
Try it Yourself:
Image Filters
The CSS filter property adds visual effects (like blur and saturation) to an element.
Note: The filter property is not supported in Internet Explorer or Edge 12.
Example
Change the color of all images to black and white (100% gray):
Tip: Go to our CSS filter Reference to learn more about CSS filters.
Image Hover Overlay
Create an overlay effect on hover:
Example
Example
Example
Example
Slide in (bottom):
Example
Example
Flip an Image
Move your mouse over the image:
Example
Responsive Image Gallery
CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:
Example
.responsive <
padding: 0 6px;
float: left;
width: 24.99999%;
>@media only screen and (max-width: 700px) <
.responsive <
width: 49.99999%;
margin: 6px 0;
>
>@media only screen and (max-width: 500px) <
.responsive <
width: 100%;
>
>Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.
Image Modal (Advanced)
This is an example to demonstrate how CSS and JavaScript can work together.
First, use CSS to create a modal window (dialog box), and hide it by default.
Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:
Работа с картинками в HTML и CSS
Этот урок посвящен теме как вставить картинку в HTML и какие стили CSS наиболее часто применяются для изображений. Здесь мы рассмотрим все основные вопросы касаемо вставки и отображения картинки в веб-документе. А также рассмотрим причины почему у некоторых пользователей не отображается картинка в HTML.
Содержание:
Как вставить картинку в HTML
В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега <img> через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента <img>. Без него этот тег не используют.
Ещё одним обязательным атрибутом элемента <img> является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.
В таблице ниже представлены атрибуты тега <img>, которые используются наиболее часто. Но на самом деле их намного больше, ведь для элемента <img> доступны все универсальные атрибуты и события.
Таблица. Основные атрибуты элемента <img>
Здесь w — дескриптор ширины, который представляет собой целое положительное число, за которым следует w.
HTML картинка. Примеры
Как добавить картинку в HTML?
Как уже говорилось, чтобы добавить картинку в HTML нужно использовать тег <img> и его обязательные атрибуты src и alt. Также, поскольку тег <img> – это строчный элемент, то его рекомендуется располагать внутри какого-нибудь блочного элемента. Например, <p> или <div>.
Как изменить размер картинки в HTML?
Чтобы изменить размер изображения используют атрибуты height (задаёт высоту картинки) и width (задаёт ширину картинки). Эти атрибуты можно указывать как вместе, так и по отдельности.
Если нужно пропорционально сжать картинку, то указывается только один атрибут (height, или width). Если же нужно чётко обозначить и высоту, и ширину картинки, то используют оба атрибута одновременно (height и width).
Как указать путь к файлу изображения в 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>.
Картинка CSS. Примеры
Использование CSS (каскадных таблиц стилей) даёт возможность более гибко, более удобно и эффективно, настраивать отображение картинок на веб-странице. Поэтому даже для того, чтобы задать ширину и высоту изображений многие веб-мастера часто используют именно каскадные таблицы стилей.
Давайте рассмотрим несколько самых распространённых примеров оформления изображений на веб-странице с помощью CSS.
Как поставить на фон картинку в HTML?
Чтобы установить изображение в качестве фона нужно задать селектору body свойство background, или background-image.
Как установить размер картинки в CSS
Чтобы задать размер картинки в CSS нужно использовать свойства width (ширина) и height (высота). Например:
- Давайте создадим новый класс imgsize.
- Для элементов этого класса пропишем свойство width равным 350px.
- Присвоим картинке созданный ранее класс imgsize.
Таким образом, ширина картинки будет равна 350px, а высота уменьшится пропорционально. Если нужно установить фиксированную ширину и высоту картинки, то можно добавить свойство height (Например, height:350px).
Как сделать картинку адаптивной
Адаптивность картинки – это возможность изображения одинаково отображаться на разных типах устройств с различными характеристиками. Например, на компьютерах с разным разрешением экрана монитора, ноутбуках с разным разрешением дисплея, планшетах, телефонах и т.д.
Самый простой способ сделать одинаковое отображение картинки на всех устройствах – это использовать следующие правила:
Как разместить текст на картинке
Как выровнять картинку по центру веб-страницы
Способ №1
Самый простой способ выровнять картинку по центру – это присвоить ей класс, сделать картинку блоком и задать ей автоматическое выравнивание с правой и левой части.
Способ №2
Помещаем картинку в блок <div> или параграф <p>, присваиваем класс этому блоку (или параграфу), и устанавливаем правило выравнивание текста по центру.
Как сделать обтекание картинки текстом
Выровнять изображение по левому, или по правому краю веб-страницы (или какого-нибудь блока, контейнера) можно с помощью свойства float.
Таким образом, чтобы сделать обтекание картинки текстом слева или справа нужно прописать следующие правила:
Как выстроить картинки в ряд
Чтобы выстроить картинки по горизонтали в один ряд, нужно поместить их в блок <div> или параграф <p>, присвоить класс этому блоку (или параграфу), и установить следующие правила:
Весь код будет выглядеть так:
Как изменить размер картинки при наведении на неё курсора мыши
Изображение можно масштабировать (изменять его размер), вращать, сдвигать, или наклонять с помощью свойства transform. А для регулирования скорости анимации используется свойство transition.
Например, если нам нужно, чтобы картинка увеличивалась (или уменьшалась) при наведении на неё курсора мыши, то нужно создать класс, присвоить его изображению и прописать следующие правила CSS:
Если нужно увеличить изображение, не увеличивая при этом размеры картинки, то картинку надо поместить в блок <div>. Для этого блока задать свойство display со значением inline-block, чтобы <div> стал размером с изображение; а также задать свойство overflow со значением hidden, чтобы всё пряталось за пределами блока <div>.
Почему не отображается картинка в HTML?
Причин почему картинка не отображается на веб-странице может быть несколько: