Как выровнять картинку по левому краю в html

51. Выравнивание изображений при помощи HTML

Если вы хотите сделать обтекание текстом изображение или указать положение относительно других изображений, то поможет атрибут align . Атрибут align принимает пять значений. Далее пример:

Похожие уроки и записи блога

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

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

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

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

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Работа с картинками в 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 (высота). Например:

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

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

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

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

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

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

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

Способ №1

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

Способ №2

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML тег <img>

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

1. Синтаксис тега <img>

Обратите внимание, что данный тег является одиночным и не требует закрывающего тега </img> .

Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL. Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.

Атрибут alt=»описание» — не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.

Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.

2. Как вставить в html картинку

Для вставки картинки в html используется тег <img> . Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.

Пример 2.1. Использование тега <img>

Этот код преобразуется на странице в следующее:

В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src=»https://zarabotat-na-sajte.ru/img/kartinka.jpg», т.е. указывается относительный адрес.

Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.

Пример 2.2. Вывод нескольких картинок в html друг за другом

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.

Пример 2.3. Использование альтернативного текста (alt) в img

Рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img> , чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега <img> .

3. Атрибуты и свойства тега <img>

1. Свойство align=»параметр» — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:

• left — выравнивание по левому краю
• middle — выравнивание середины изображения по базовой линии текущей строки
• bottom — выравнивание нижней границы изображения по окружающему тексту
• top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
• right — выравнивание по правому краю

Пример 3.1. Выравнивание изображения в html по правому краю

Преобразуется на странице в следующее:

2. Свойство alt=»текст» — подсказка/описание картинки. Выполняет сразу две важные функции:

• Выдает подсказку при наведении
• Если в браузере отключены изображения, то выводится этот текст

Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.

3. Свойство border=»ЧИСЛО» — задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border

Пример 3.2. Вывод картинки в html с рамкой (границей)

Преобразуется на странице в следующее:

4. Свойство bordercolor=»цвет» — задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.

Пример 3.3. Вывод картинки в html с цветной рамкой

Результат можно видеть чуть выше.

Атрибуты border и bordercolor можно задать в стилях CSS к img:

5. Свойство height=»ЧИСЛО» — задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.

6. Свойство width=»ЧИСЛО» — задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.

7. Свойство hspace=»ЧИСЛО» — задает горизонтальный отступ изображения в пикселях от других объектов html.

8. Свойство vspace=»ЧИСЛО» — задает вертикальный отступ изображения в пикселях от других объектов html.

Вместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:

• margin-top: X px; (X — отступ сверху)
• margin-bottom: Y px; (Y — отступ внизу)
• margin-left: L px; (L — отступ слева)
• margin-right: R px; (R — отступ справа)

Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.

Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.

Преобразуется на странице в следующее:

В данном примере — отступ сверху составил 10 пикселей, слева 50 пикселей.

9. Свойство class=»имя_класса» — можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.

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

Такой вопрос возникает у молодых вебмастеров. На самом деле все очень легко. Для этого достаточно обрамить тег <img> тегом <a> (ссылкой).

5. Как скруглить углы у картинки

Чтобы сделать картинку более эффектной рекомендуется в некоторых случаях применять свойство border-radius: N px , где N — радиус среза картинки. Например:

Более подробно про скргуления углов читайте в отдельной статье как скруглить углы в HTML через CSS

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.

Как вставить картинку в HTML-код веб-страницы + настройки атрибутов тега «img»; стилизация графики с помощью CSS: выравнивание, отступы, изображение фоном, ссылкой или в кнопках, а также эффекты при наведении

Сегодня рассмотрим, как основной способ добавления графики на HTML-страницу — соответственно, непосредственно с помощью тега «img», так и другие дополнительные способы, которые могут понадобиться в различных ситуациях при разработке интернет-страниц.

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

Подготовим простой шаблон HTML-страницы для вставки в неё графики

Для наглядности сначала создадим каркас HTML-страницы с неким текстом (код. 1), а затем вставим в неё картинку, после чего уже разберём все параметры и настройки, которые, в основном, используются и могут быть полезны:

Код 1. Базовый каркас HTML-страницы

Информацию далее рассмотрим в виде урока, чтобы поочерёдно раскрыть тему детальнее.

Перед началом выполните следующие подготовительные шаги:

1. Создайте, например, на рабочем столе, любую папку, в которой будем работать. Назовём её dobavlenie-kartinki (скачать готовый результат со всеми исходниками можно в конце статьи) .
2. В подготовленной папке создайте файл index.html (справка начинающим ниже) , в который поместите предоставленный в блоке «Код 1»HTML-каркас — это будет наша очень простая web-страница, в текст которой будем вставлять картинки и производить с ними различные настройки.
3. Для наглядности, чтобы страница имела небольшой логотип, поместите в эту папку файл с названием logo.png (например, этот) (его подгрузка на страницу уже прописана в предоставленном коде).

Итого, мы имеем папку и в ней 2 файла:

Рис. 1. Рабочая папка с файлами

Справка начинающим. Для создания и редактирования HTML-файлов, когда не требуется объёмного редактирования, удобно использовать любой простой редактор текстовых ( .txt ) файлов — тот же «Блокнот» или чуть более продвинутые ( например, при подготовке статьи я использую «Notepad++»).

Для создания нашего index.html откройте новый файл в блокноте (или Нотепаде) , вставьте в него указанный выше HTML-код и сохраните файл с расширением .html .

Добавление на страницу картинки (используем тег <img> )

Подготовьте и поместите в ранее созданную папку файл картинки. Для примера, пусть это будет изображение окна браузера — brauzer.jpg (скачать), которое поместите в нашу обозначенную папку:

Рис. 2. Файл «brauzer.jpg»

Откроем созданный index.html и найдём в нём следующее:

Код 2. Место для вставки картинки

И рядом (или вместо этого кода) добавим HTML подготовленной картинки:

Код 3. Код картинки — тег <img>

Должно получиться следующее:

Рис. 3. Тег картинки в коде index.html

То есть код 3 — это необходимый HTML, который нужно разместить на web-странице, чтобы вместо него отобразилась картинка.

Для настройки <img> в основном используют следующие атрибуты:

src — атрибут для указания адреса изображения. Это может быть, как относительный адрес (относительно папки (раздела на сайте)) (как в нашем примере — src=»https://nikmurashkin.ru/kodding/vyorstka/brauzer.jpg» ), так и абсолютный адрес вашего сайта или любого другого ресурса ( например, src=»https://nikmurashkin.ru/sites/default/files/inline-images/brauzer.jpg» )

width и height — ширина и, соответственно, высота картинки в пикселях. В данном случае я указал оригинальные размеры изображения, но можно указать и меньшие или бо́льшие.

При этом, конечно же, при указании бо́льших размеров, картинка будет терять в качестве, а при задании меньших (если размеры уменьшены не пропорционально) — искажаться, вписываясь в указанные параметры.

Обычно разработчики задают оригинальные размеры, а далее, при необходимости, меняют картинки как угодно с помощью каскадных стилей CSS (стилизацию рассмотрим чуть позже по тексту) .

alt — альтернативное название. Оно отображается вместо картинки, если у пользователя отключен показ графики на страницах, а также воспроизводится многими интернет- читалками (скринридерами).

Кроме того, данный атрибут считывают поисковые системы, чтобы точнее распознавать изображения.

После того как добавили HTML-код изображения (не забыв положить в папку саму картинку), давайте откроем наш файл «index.html» и посмотрим, что получилось :

Рис. 4. Результат вставки изображения (пока без стилизации)

Как видно на рис. 4, картинка на страницу добавлена, но выглядит не очень красиво. В следующем разделе статьи далее подключим файл стилей CSS, подравняем страницу в целом, а после этого уже будем применять настройки и различные эффекты к самой картинке.

Стилизация изображения с помощью CSS

Итак, наша HTML-страница с пару абзацами текста и картинкой между ними готова. Давайте для наглядности выровняем её с помощью CSS-стилей. Для этого подключим к странице файл «style.css», в который будем задавать все необходимые стилевые настройки.

Предварительно, конечно же, перед тем как подключать стилевый файл, его нужно создать и поместить в нашу папку: откройте текстовый редактор, создайте новый пустой файл и сохраните его, как style.css .

Должно получиться следующее:

Рис. 5. Добавлен файл «style.css»

Найдите в коде index.html следующую строку:

Код 4. Место для подключения CSS-файла стилей

И вставьте в это место следующее (тем самым подключив созданный style.css ) :

Код 5. Тег <link> , подключающий файл стилей

Результат будет следующим:

Рис. 6. Результат подключения файла «style.css»

Теперь обратите внимание на ранее добавленный в index.html код — там у некоторых элементов (тегов) заданы такие атрибуты, как классы: class=»header», , и другие. Обращаясь к этим классам, проведём стилевые настройки для выравнивания элементов на странице. Для этого добавьте в файл style.css следующий код:

Код 6. CSS-код для основной настройки веб-страницы

После добавления в CSS-файл кода 6, страница выровнена, но изображение слишком велико и «выталкивает» вправо боковую колонку. Давайте это поправим, тем самым уже перейдём непосредственно к настройкам картинки. Допишите в стилевый файл следующее:

Код 7. Настройка для вмещения картинки в свой контейнер

Наконец, мы получили выровненную web-страницу (рис. 6), а далее научимся применять к изображениям разные настройки и эффекты: разберёмся с заданием размеров, выравниванием и отступами; расположим картинку, как фон; сделаем ссылкой; вставим в кнопки (в том числе и иконкой) и прочее.

Рис. 7. Выровненная HTML-страница

Изменение размеров картинки

Выше мы рассмотрели атрибуты тега <img> , которыми можно указать отображаемый размер картинки — это width и height , но для оформления изображений (как и любых других HTML-элементов) гораздо удобнее использовать CSS-стили ( например, в 1-ом месте в стилевом файле можно изменить размеры всей графики или картинок определённого класса, когда как атрибуты тега пришлось бы менять у каждого необходимого изображения).

Для указания и изменения размеров в CSS используются свойства, которые также называются width (ширина) и height (высота элемента).

Давайте добавим в наш файл «style.css» следующий код:

Код 8. Настройка ширины и высоты изображения

После чего картинка на странице приняла заданные размеры:

Рис. 8. Изображение приняло уменьшенный вид

Обратите внимание, что в коде 8 я указал перед <img> класс .article , чтобы изменения применялись только к графике, расположенной в элементе с соответствующим классом (в нашем случая — это в статье). Если бы я не сделал это ограничение, то данные размеры приняли бы все картинки (в том числе и логотип на странице).

Какими бы мы не указали width и height непосредственно в атрибутах <img> в коде страницы, аналогичные значения, заданные в CSS, имеют больший приоритет и перекроют атрибуты.

Выравнивание изображения, отступы

Зададим изображению отступы свойством margin , а также укажем, к какому краю должна прижиматься картинка при обтекании её текстом. Для этого в стилевый файл добавьте следующее :

Код 9. CSS-код для выравнивания картинки по левому краю

Добавим в файл index.html ещё несколько абзацев текста и вторую картинку ( предварительно скачайте её и поместите в нашу рабочую папку) между ними (код 10), которую после этого по аналогии выравняем по правому краю с обтеканием текста слева.

Код 10. Несколько абзацев и вторая картинка в index.html

Добавленный код будет выглядеть так:

Рис. 9. Второе изображение в коде веб-страницы

В файл style.css добавьте:

Код 11. Стили для картинки из кода 10

А визуально результат будет следующим:

Рис. 10. Картинка выровнена по правому краю, а текст обтекает слева

Обратите внимание! В коде 10 к тегу картинки я добавил class=»img-two» , чтобы привязать стили конкретно к изображениям указанного класса (в данном случае — это всего одно изображение).

Кроме того, поскольку ко всем <img> , являющимися потомками класса .article я уже указал отступы ( margin: 3px 20px 16px 0; ), то поскольку второе изображение (с классом .img-two ) также относится к <img> внутри .article , верхний и нижний отступы я не стал указывать отдельно, а переопределил лишь левый ( margin-left: 20px; ) и правый ( margin-right: 0; ).

Наконец, давайте выровняем изображение по центру. Для этого скачайте 3-ю картинку, поместите её в рабочую папку и добавьте в index.html следующий код (дополнительный абзац текста + изображение с классом .img-three ) (код 12) (например, в этом (рис. 11) месте):

Код 12. Код для добавления на страницу 3-го изображения Рис. 11. Код третьей картинки и дополнительный абзац текста в index.html

Укажем необходимый CSS для только что добавленного изображения:

Код 13. Стилизация 3-го изображения

Теперь же получим выровненное по центру изображение:

Рис. 12. Картинка выровнена по центру

Посмотрите на код 13. Теперь мы сделали изображение блочным, чтобы как блоку придать ему центральное положение.

Можно было сделать иначе — оставить картинку строчной, а у родителя в HTML-коде (в нашем примере это элемент с классом .article ) задать выравнивание по центру CSS-свойством text-align: center; . Но поскольку в .article находятся и другие элементы (текст страницы, например) , которые также были бы выровнены по центру (а нам это не нужно) , я сделал изображение блочным и расположил его по центру заданием автоматически подбираемыми левым ( margin-left: auto; ) и правым ( margin-right: auto; ) отступами.

Также обратите внимание, что нам в любом случае понадобится отключить обтекание картинки, что и было сделано свойством float: none; .

Изображение, как фон (свойство background-image )

Для вставки картинки фоном нужному элементу необходимо задать CSS-свойство background-image , в котором указать адрес изображения (или относительный, или абсолютный (полный путь на сайте до картинки)).

Давайте сначала зададим фон для всей страницы (для тега <body> ), добавив в style.css следующий код ( предварительно скачайте и поместите в рабочую папку картинку, которая будет фоном):

Код 14. CSS для обозначения фона документа

Давайте теперь добавим на страницу какой-либо блок и зададим фон ему. Скачайте это изображение и добавьте в нашу папку с файлами, а в код HTML-страницы поместите следующее:

Код 15. Блок с фоном в index.html

Код 15 вставьте, например, здесь:

Рис. 13. HTML блока с фоном

А CSS-файл дополните следующими стилями:

Код 16. Стилевые настройки блока с картинкой-фоном

После проведённых манипуляций, блок на странице примет вид:

Рис. 14. Результат настроек блока и его фона

Заметьте взглядом (код 16) свойство background-repeat . В нём указано round (изображение большое, поэтому указано автоматическое вмещение по ширине блока), но также, при необходимости, можно было указать :

• no-repeat — изображение будет в оригинальном размере без повторений в какую-либо из сторон
• repeat — если картинка меньше, то как по горизонтали, так и по вертикали, она повторяется до полного заполнения всего пространства заданного элемента (лишние остатки обрезаются)
• repeat-x — повторяется только по горизонтали (лишнее обрезается)
• repeat-y — повторяется по вертикали (лишнее обрезается)
• space — изображение заполняет всю область, не обрезаясь, а для полного равномерного заполнения блока между картинками добавляются пустые области

Эффекты при наведении на картинку (псевдоэлемент :hover )

Чтобы настроить изменение поведения изображения при наведении на него мышью, необходимо задать ему и стилизовать как нам угодно псевдокласс CSS :hover .

Давайте для примера добавим на нашу веб-страницу 3 новых картинки и зададим для них распространённые простые эффекты при наведении. Загрузите и поместите в папку данные 3 изображения: 1, 2, 3. После этого, разместите в index.html данный код :

Код 17. 3 картинки с эффектами при наведении

Чтобы в HTML-файле получилось следующее:

Рис. 15. Код картинок с эффектами в файле «index.html»

Теперь поочерёдно зададим стили эффектов каждой из 3-х картинок (коды: 18, 19 и 20) .

Код 18. Установка ширины и высоты 3-х картинок и эффект (появление тени) при наведении для первой Код 19. Переворачивание на 360 градусов 2-го изображения Код 20. Фильтр, повышающий насыщенность цветом на 200% для 3-го

В коде 18 обратите внимание на .article .effect . То есть картинки, к которым нужно применять эффекты, я выделил не только отдельными для них классами .img-osen, .img-krolik и .img-japonki , но также ввёл каждой из них по второму общему классу .effect (см. код 17 или рис. 15) , чтобы задать одинаковые ширину и высоту единоразово и не повторяться, указывая их отдельно в стилях каждого необходимого изображения.

Возможности CSS богаты, поэтому реализовать можно и множество других эффектов: от несложных, до более «продвинутых» ( в том числе, при желании, и дополнительно применяя какие-либо настройки программированием (на JavaScript обычно)). Всё зависит от необходимости и фантазии.

Примеры вставки графики на страницу

Изображение, как ссылка (тег <a> )

Сначала скачайте и загрузите в рабочую папку нужное изображение, которое, чтобы сделать ссылкой, требуется обернуть тегом <a> :

Код 21. Изображение внутри ссылки

Вставьте в рабочий файл, например, здесь:

Рис. 16. Картинка-ссылка в индексном файле

И добавьте этот CSS в стилевый файл:

Код 22. Стили для ссылки и изображения

Таким образом мы создали ссылку на текущую страницу .

Давайте подробно рассмотрим атрибуты ссылки (тега <a> ) (см. код 21):

• href . Здесь необходимо указать адрес, на который будет осуществляться переход при нажатии на ссылку (в нашем случае она содержит картинку) . Необходимый формат адреса:
  • Абсолютный:
    • С протоколом — https://nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html (таким образом я указал в рассматриваемом примере (рис. 16))
    • Без протокола — //nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html (это более универсально, поскольку если сайт, на который вы ссылаетесь, имеет только один протокол (например, http:// , но не предоставляет https:// ) или на текущий момент имеет доступ по двум протоколам, а в будущем это изменится, ваша универсальная ссылка, не зависимая от протокола, в любом случае останется рабочей

    Относительный — /kodding/vyorstka/vstavit-kartinku-v-html (без указания протокола и адреса домена) . Если ссылка на главную страницу, то необходимо указать href=»/» .

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

    В итоге, картинка, которая является ссылкой, на рабочей веб-странице должна у вас принять следующий вид:

    Рис. 17. Изображение с планетами добавили на рабочую страницу в виде ссылки

    Кнопка картинкой или с иконкой внутри (теги: <input>, <button> ; <svg>, <object> ; кнопка «Скачать»)

    Далее рассмотрим, как сделать кнопку картинкой ( например, часто распространённая кнопка «Скачать») и как сделать текстовую кнопку , но также содержащую в себе нужную графическую иконку .

    Для этого будем использовать следующие HTML-элементы (теги):

    <input> — это поле ввода, обычно используемое в разнообразных формах на сайтах (поле для ввода логина, пароля и прочего).

    Если у тега атрибут type задан со значением submit ( <input type=»submit» value=»Отправить»> (кнопка с текстом «Отправить») (или type=»reset» (для сброса формы), type=»button» (какая-либо кнопка) ), то <input> является кнопкой; если параметр type имеет значение image ( <input type=»image» src=»https://nikmurashkin.ru/kodding/vyorstka/%D0%90%D0%B4%D1%80%D0%B5%D1%81%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8%20(%D0%BE%D1%82%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9%20%D0%B8%D0%BB%D0%B8%20%D0%B0%D0%B1%D1%81%D0%BE%D0%BB%D1%8E%D1%82%D0%BD%D1%8B%D0%B9)» value=»Отправить»> ) — кнопкой-изображением (также, как и type=»submit» , выполняет функцию отправки формы ). Закрывающий тег не требуется.

    <button> — также имеет параметр type , который может принимать значения: submit (кнопка отправки) , reset (сброса) и button (любая другая кнопка) .

    Если type не задан, то по умолчанию подразумевается значение submit . В формах <button> может использоваться (и часто применяется) в роли кнопки вместо <input> .

    Преимущество <button> в том, что его можно более расширенно стилизовать (например, указывать в CSS стили псевдоэлементов ::before и ::after (у <input> этого сделать нельзя). Также, поскольку <button> имеет закрывающий тег, можно вписывать в кнопку, кроме текста, и другие HTML-теги (в input-кнопке только текст в параметре value )).

    • Если (в форме) нужна простая текстовая кнопка без иконки (+ можно через CSS задать в том числе и графический фон, при необходимости), то <input>
    • Если (в форме) нужна простая графическая кнопка, — <input> с type=»image» и указанием адреса картинки (параметр — src=»https://nikmurashkin.ru/kodding/vyorstka/%D0%90%D0%B4%D1%80%D0%B5%D1%81″ )
    • Если нужна более сложная кнопка ( или для формы, или в любом другом месте на странице (хотя, на текущий момент спецификация не запрещает и <input> использовать вне форм)), то <button>

    Изображение в <input> . Предварительно загрузите фоновое изображение, а также графическую кнопку и поместите их в нашу рабочую папку dobavlenie-kartinki . Теперь добавьте в index.html следующий код :

    Код 23. Графика в формах в <input>

    Чтобы получилось следующее:

    Рис. 18. Расположение кнопок <input> в коде индексного файла

    Код 24. CSS для <input>

    А в итоге на web-странице будет размещено таким образом:

    Рис. 19. Итоговый результат «input» с фоном-картинкой (с помощью свойства CSS background-image ) и отдельной графической кнопкой (с type=»image» и src=»https://nikmurashkin.ru/kodding/vyorstka/%D0%90%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F» )

    Обратите внимание на src=»https://nikmurashkin.ru/kodding/vyorstka/otpravit-zajavku.png» (см. код 23 или рис. 18) , где я указал относительный адрес картинки. Также можно было указать абсолютный https://nikmurashkin.ru/sites/default/files/inline-images/otpravit-zajavku.png .

    Изображение в <button> . Давайте сделаем кнопку посложнее, например, помимо текста, ещё и с иконкой внутри. Для примера создадим 3 кнопки, в одну из которых добавим img-картинку, а в 2-е другие — векторные <svg> ( непосредственно на страницу и добавлением через элемент <object> ).

    Пусть для наглядности эти кнопки будут активировать действие небольшого скрипта, который также напишем на «JavaScript» (не пугайтесь, я напишу, а вам достаточно просто скопировать вместе с HTML-кодом кнопок).

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

    Код 25. Скрипт + блок, на который он оказывает влияние и кнопки управления

    Рис. 20. button-ы в index.html

    А в стили допишите следующее:

    Код 26. CSS для вышедобавленного HTML Рис. 21. Результат расположения кнопок с иконками на web-странице

    Замечания к нашим кнопкам с иконками (код. 25, рис. 20):

    • Атрибут type . Поскольку рассмотренные кнопки не находятся внутри форм, то большинство современных браузеров и так определит их тип, но по правилам «хорошего тона» стоит указать его явно, как я и сделал у всех <button> , добавив атрибут type=»submit» .
    • aria-hidden . Поскольку картинка в теге <img> является иконкой и не представляет из себя для читателя смысловой нагрузки (а служит декоративным элементом), то для пользователей «интернет-читалок» я указал атрибут aria-hidden=»true» , чтобы программы при проговаривании текста страницы не зачитывали бессмысленный текст атрибута alt (в нашем примере — это alt=»Иконка «Скрыть»» ) , а для пользователей браузеров, у которых может быть отключена поддержка картинок, вместо пустого места будет показана информация о картинке текстом из alt-а.

    Тег <svg> . Это тег для встраивания на странице масштабируемой векторной графики напрямую непосредственно в HTML-код. Часто используется для добавления иконок, которые при увеличении или уменьшении масштаба, не теряют в качестве.

    С подробным туториалом по SVG можно ознакомиться на «MDN».

    Преимущества и недостатки добавления изображений через тег <svg> напрямую на веб-страницу или встраивания с помощью <object> :

    • Если напрямую (inline) в <svg> — все внутренние элементы тега будут доступны для стилизации (например, у вас сложная картинка (иконка) и внешний вид отдельных её частей вы хотите как-либо по-разному настроить) обычным способом в CSS, но изображение не будет кешироваться браузером. Соответственно, больше подходит для вектроной графики, которая используется на отдельных страницах и не повторяется на большинстве.
    • Если встраивать через <object> — все стили отдельных частей изображения (при необходимости) нужно будет задавать стилевым атрибутом в коде SVG-картинки, а объектом уже встраивать её в HTML, но графика, подгруженная таким образом, кешируется браузерами. Соответственно, если иконка используется на множестве страниц сайта, этот способ предпочтительнее — для экономии запросов к серверу.

    Кнопка-ссылка в теге <a> . Изображение, как ссылку мы уже рассмотрели выше. Кнопка создаётся аналогичным образом: необходимая картинка в элементах <img> или <svg> просто оборачивается тегами <a> с указанием страницы (в атрибуте href ), на которую должен осуществляться переход по клику на ссылку-картинку (иконку).

    SVG-картинка, подгружаемая через <object> , тоже может быть ссылкой, но в этом случае ссылку нужно вставлять в код самого файла .svg (подробнее ниже) .

    Создадим графическую кнопку «Скачать», а также 2 векторные иконки ссылками , вставленные — одна через <svg> , другая — через <object> .

    Загрузите и поместите в рабочую папку три файла: 1, 2 и 3, а после этого разместите в соответствующих местах необходимые коды (код 27, код 28).

    Код 27. HTML-код кнопок и иконок-ссылок Рис. 22. Место добавления кода 27 Код 28. CSS для кода 27 Рис. 23. Внешний вид добавленных ссылками: 1-ой кнопки «Скачать» и 2-х векторных иконок

    Как сделать ссылкой SVG-картинку, загруженную через <object> . В блоке кода номер 27 обратите внимание на элемент <object type=»image/svg+xml» data=»bear.svg»></object> , который не обёрнут тегом <a> , как это сделано с <svg> и <img> тегами.

    Дело в том что, чтобы SVG-изображение, подгружаемое через <object> , сделать ссылкой, нужно прописать её в коде самого файла Название_картинки.svg ( в нашем случае — это медведь — в bear.svg ) (см. код 29) .

    Код 29. Содержимое файла «bear.svg»

    В коде bear.svg обратите внимание на атрибуты тега <svg> , в который, помимо обязательного xmlns=»http://www.w3.org/2000/svg» , я также добавил xmlns:xlink=»http://www.w3.org/1999/xlink» — он необходим, чтобы не было конфликтов между стандартными ссылками на веб-странице и подгружаемыми в объекте.

    Теперь нам необходимо обернуть все элементы картинки (в данном примере — все <path> ) стандартными тегами ссылок <a> , но вместо привычного href , адрес стоит указывать в атрибуте xlink:href (в примере я указал xlink:href=»https://nikmurashkin.ru/kodding/vyorstka/vstavit-kartinku-v-html» ).

    Ну а target=»_blank» , повторюсь, необходим для открытия ссылки в новом окне (или во вкладке (в зависимости от настроек браузера)).

    Также здесь посмотрите на <?xml-stylesheet type=»text/css» href=»style-svg.css»?> . Во встраиваемое через <object> SVG-изображение вносить стили нужно отдельно от стилевого файла страницы (поскольку <object> встраивается, как отдельная страница (объект)), а именно — в коде самой картинки SVG (в нашем случае файла bear.svg ) или подключением там же дополнительного файла CSS ( я подключил файл style-svg.css , в атрибуте href указав относительный адрес (также можно было задать абсолютный , например, href=»https://nikmurashkin.ru/sites/default/files/files/style-svg.css» )).

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