Выравнивание слева, справа и по центру
Код, приведенный ниже, выравнивает изображение по левому краю:
Следующий код предназначен для центрирования изображения:
Следующий код содержит CSS для выравнивания по правому краю ( HTML align right ):
Плавающие изображения с использованием CSS
Создание плавающих изображений позволяет расположить изображения по горизонтали. При этом текст будет обтекать изображения.
Обтекание изображения текстом слева
Важно! Плавающие изображения будут накладываться друг на друга, если свойство float не очищено. Убедитесь, что вы размещаете код для очистки float после каждой секции, в которой располагается ваше изображение
Ниже приведен код для сброса значения свойства float :
Размещение изображений по горизонтали
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, лайки, подписки!
CSS-свойство background
В CSS свойство предназначено для управления фоном любого элемента.
Это универсальное свойство, которое позволяет вам сразу установить несколько параметров. А именно:
- фоновое изображение или градиент;
- начальную позицию фонового изображения и его размер;
- повтор фонового изображения;
- перемещение фона относительно области просмотра браузера и элемента;
- цвет и т.д.
Универсальное свойство состоит из восьми других свойств (в скобках указано значение по умолчанию, которое имеет каждое из них):
- (none);
- (0% 0%);
- (auto);
- (repeat);
- (scroll);
- (padding-box);
- (border-box);
- (transparent).
Вы можете указывать их все и при этом практически в любом порядке (хотя порядок, рекомендованный в спецификации, приведён выше). Те свойства, которые вы не указали в , будут иметь значения по умолчанию (указанные в скобках).
Картинки в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
Ранее я рассказывал о том, как вставить картинку в HTML-страницу. Если кто пропустил, то см. эту статью здесь.
Сегодня продолжу рассказывать о картинках — рассмотрим ещё некоторые полезные атрибуты тега <img> , а также “фишки” использования рисунков.
Обтекание рисунка текстом в HTML
Если большие картинки обычно вставляются между абзацами, то маленькие чаще вставляются в текст, то есть текст обтекает картинку. Однако если в HTML не принять дополнительных мер, то картинка будет вставлена в текст просто как “буква”, и текст будет продолжаться после картинки одной строкой. Соответственно, если рисунок имеет размер более одной строки, то между строками получится большое пустое пространство, что не очень красиво:
Для выравнивания картинки в тексте в теге <img> можно применить атрибут align . Выравнивание как раз и позволяет добиться обтекания картинки текстом.
Стандарты HTML определяют пять значений для атрибута align :
- left — выравнивание по левому краю
- right — выравнивание по правому краю
- top — выравнивание по верхнему краю
- bottom — выравнивание по нижнему краю (это значение по умолчанию)
- middle — выравнивание по середине
Если вы не используете атрибут align , то выполняется выравнивание картинки по нижнему краю (как на рисунке выше).
Некоторые браузеры могут поддерживать и другие значения, но мы о них говорить не будем, поскольку это уже за рамками стандарта.
Итак, если вы хотите, чтобы текст обтекал картинку справа, то значение атрибута align должно быть равно left . Это немного странно, если думать о выравнивании текста. Но мы то выравниваем не текст, а картинку. Поэтому всё правильно — картинка будет слева, а текст — справа.
Пример выравнивания картинки по левому краю (обтекание текстом справа):
<img src=»https://info-master.su/programming/web/html/images-in-html.jpg» align=»left»>
А вот так примерно это будет выглядеть в браузере:
Рамка вокруг рисунка в HTML
Вообще этим пользуются редко, но иногда всё-же необходимо сделать рамку вокруг рисунка. Для этого можно использовать атрибут border . Делается это примерно так:
<img border=»5″ src=»https://info-master.su/programming/web/html/warning.png»>
Здесь мы обводим рисунок рамкой шириной 5 пикселей. По умолчанию цвет рамки будет чёрным. К сожалению, я не знаю простых способов изменить цвет рамки только средствами HTML, а в CSS и прочие прелести я погружаться не буду, так как мой рассказ про HTML.
Некоторые браузеры могут обводить рисунок рамкой по умолчанию, если атрибут border не указан. Поэтому, чтобы быть уверенным в том, что рамки вокруг рисунка не будет, лучше всегда использовать атрибут border с нулевым значением.
Атрибуты hspace и vspace
Итак, выравнивание рисунка в HTML теперь для вас сложности не представляет. Однако есть один неприятный вопрос — текст слишком близко прижат к картинке. Это не очень красиво смотрится.
Как же сделать отступы между текстом и картинкой? Для этого есть атрибуты hspace и vspace , которые задают отступы от горизонтального (справа и слева) и вертикального (сверху и снизу) края картинки соответственно. Пример:
В этом примере мы задаём отступы слева и справа по 50 пикселей, а сверху и снизу — по 10 пикселей. А в браузере это будет выглядеть примерно так:
Картинка в заголовке HTML
Иногда требуется вставить картинку в заголовок. Сделать это несложно. Например:
«> Очень важно
. А выглядеть это будет примерно так:
А выглядеть это будет примерно так:
И вообще картинки можно вставлять куда угодно — в таблицы, в списки и т.п.
О картинках много ещё чего можно рассказать. И я как-нибудь вернусь к этому вопросу. Но на сегодня всё.
А если хотите знать больше и прямо сейчас, то изучите курс о вёрстке сайтов.
Как вставить картинку в HTML
Ещё одним обязательным атрибутом элемента является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.
Таблица. Основные атрибуты элемента
| Атрибут | Описание | Пример |
| alt | Добавляет альтернативный текст для изображения. Этот текст выводится в месте появления изображения до его загрузки, или если картинка не может быть загружена (Например, при отключенной графике, или указан неверный путь к изображению). | |
| height | Высота изображения в пикселях (px). Если задать высоту изображения и при этом не указывать ширину, то картинка будет сжата пропорционально. | |
| src | Задает путь к изображению. | |
| sizes | Задаёт размер изображения в зависимости от параметров отображения (размеры изображения для разных макетов страницы).Работает только при заданном атрибуте srcset.Значением атрибута является одна или несколько строк, указанных через запятую.В качестве значений можно использовать единицы em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px, но не проценты. | sizes=» (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw»Здесь vw — это ширина в процентах от области просмотра. |
| srcset | Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе с атрибутом src, или вместо него. Значением этого атрибута является одна или несколько строк, разделенных запятой. |
srcset=» img/logo-mobile.jpg 320w, img/logo-wide-mobile.jpg 480w, img/logo-tablet.jpg 768w, img/logo-desktop.jpg 1024w, img/logo-hires.jpg 1280w»
width Ширина изображения. Если задать ширину изображения и при этом не указывать высоту, то картинка будет сжата пропорционально.
Рисунок на поле
При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).
Рис. 3. Изображение размещается на поле слева от текста
Применение таблиц
Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега
Атрибут align
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается атрибутом align тега <img> .
Значения
В табл. 1 перечислены возможные значение атрибута align и результат его использования.
| Значение | Описание | Пример |
|---|---|---|
| bottom | Выравнивание нижней границы изображения по окружающему тексту.. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| left | Выравнивает изображение по левому краю окна. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| middle | Выравнивание середины изображения по базовой линии текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| right | Выравнивает изображение по правому краю окна. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Наиболее популярные значения — left и right , создающие обтекание текста вокруг изображения.
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE> .
HTML 4.01 IE Cr Op Sa Fx
Примечание
Дополнительные значения absbottom , absmiddle , baseline и texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0.
HTML5Блочные элементы
Начинаем с HTML
Для нашего примера мы создадим абзац текста и добавим в начале изображение (перед текстом, но после открывающегося тега <p>). Вот как выглядит HTML-разметка:
По умолчанию веб-страница будет отображаться с изображением над текстом. Это связано с тем, что в HTML изображения являются блочными элементами. Это значит, что браузер отображает разрывы строки до и после изображения. Мы изменим это поведение по умолчанию с помощью CSS. Но сначала добавим к нашему элементу изображения значение класса:
Стили CSS
Включив в HTML-код атрибут класса «left», можно перейти к vertical align central float left. Мы добавим в таблицу стилей правило, которое задаст смещение изображения. А также несколько дополнительных правил, которые обеспечат, чтобы текст не прилегал к изображению вплотную, обтекая его.
Вот CSS-код:
Этот код смещает изображение влево и добавляет небольшие отступы справа и снизу от изображения.
Если просмотреть в браузере страницу, то изображение в ней будет выровнено по левому краю, а текст абзаца будет отображаться справа от него с соответствующим отступом. Одно замечание относительно значения класса «left«, которое мы использовали. Имейте в виду, что это значение является произвольным. Мы могли бы назвать класс как угодно, а термин «left» сам по себе ничего не делает.
Нам просто нужно задать атрибут класса в HTML, который связан с фактическим стилем CSS float left, а он уже определяет визуальные изменения, которые необходимо произвести.
Альтернативные способы
Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS, который смещает элемент, это только один способ «выравнивания по левому краю». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса «main-content«:
Задать стили для изображения можно с помощью следующего кода CSS:
Изображение будет выровнено по левому краю, текст будет обтекать его, как и раньше, но нам не нужно добавлять дополнительное значение класса в разметку. Этот способ выравнивания float left по центру позволит создать меньший HTML-файл, что повысит производительность.
Также можно добавить стили непосредственно в HTML-разметку, например:
Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.
Предпочтительной практикой считается, когда стили и структура страницы разделены. Это особенно полезно, когда нужно быстро изменять макет страницы, подстраиваясь под различные размеры экрана и устройства на адаптивном сайте. Наличие стиля страницы, смешанного с HTML, значительно усложнит создание медиа-запросов, которые могут корректировать внешний вид сайта по мере необходимости.
Перевод статьи «How To Float an Image to the Left of Text on a Webpage» дружной командой проекта Сайтостроение от А до Я.
Выравнивание картинок
В зависимости от положения изображения различают разные способы их выравнивания. Так, рисунок может выравниваться по правому или левому краю окна браузера или, если он встраивается непосредственно в текстовую строку, по базовой линии текста.
Обтекание изображения текстом
Выравнивание изображения с одновременным обтеканием его текстом — один из популярных приёмов вёрстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с разных сторон. Для создания обтекания изображения текстом существует несколько способов, самый удобный, конечно же, связан с применением стилей.
Для обтекания картинки текстом применяется стилевое свойство float . Значение right будет выравнивать изображение по правому краю родительского элемента или окна браузера, а текст размещать слева от рисунка. Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 1). Элемент, для которого установлено значение float , обычно называется плавающим. Это название, конечно же, условное и говорит лишь о том, что текст или другие объекты будут обходить его с разных сторон, создавая обтекание.
Пример 1. Применение float
В данном примере вводится два класса с именами left и right , добавление которых к элементу <img> или <figure> выравнивает их по соответствующему краю. Чтобы текст немного отступал от картинки добавляется универсальное свойство margin . На рис. 1 показано выравнивание по левому краю.
Рис. 1. Выравнивание фотографии по левому краю
Выравнивание рисунка относительно текста
Картинки можно добавлять непосредственно в текст и управлять их положением относительно текста с помощью свойства vertical-align . По умолчанию картинка выравнивается по базовой линии — это невидимая горизонтальная линия, проходящая по нижнему краю символов. Некоторые буквы (д, р, у, ф, ц, щ) содержат нижний выносной элемент, выходящий за базовую линию (рис. 2).
Рис. 2. Базовая линия
Если просто вставить рисунок посередине строки, то он будет выглядеть следующим образом (рис. 3).
Рис. 3. Картинка, выровненная по базовой линии текста
В примере 2 все изображения внутри абзаца <p> выравниваются посередине текста, для этого в качестве значения применяется middle .
Пример 2. Выравнивание картинки относительно текста
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Изображения</title> <style> p img </style> </head> <body> <p>Вид самой кривой изменяется с помощью инструмента карандаш <img src=»image/pen.png» alt=»»>. Для создания прямых отрезков устанавливайте точки удерживая клавишу Shift. </p> </body> </html>
Результат данного примера показан на рис. 4. Заметьте, как изменилось положение верхней строки с картинкой.
Размер изображения
В предыдущих примерах размер изображения и его позиция определялась браузером. По умолчанию размер изображения равняется оригинальному размеру из файла, а его позиция фиксируется в левом верхнем углу блока.
Однако не всегда мы можем угадать, какого размера нужно изображение. Это зависит от множества факторов, например:
- Разрешение экрана пользователя
- Адаптивность проекта
- Интерактивность, когда пользователь может взаимодействовать со страницей и от этого меняются некоторые ее части
При таких условиях может понадобиться одно изображение, которое, в то же время, будет подстраиваться по размеру под «реалии» страницы. Для этого существует свойство , которое принимает два значения:
- Ширина изображения
- Высота изображения
Если будет указана только ширина, то высота подстроится автоматически, сохраняя пропорции изображения. Такой вариант используется чаще всего. В качестве значения свойства можно использовать все изученные единицы измерения
В этом примере очень важно перейти на сам CodePen и попробовать разные размеры ширины браузера
Обратим внимание на размеры левого изображения — оно всегда будет занимать 30% от ширины блока, даже если изображение выходит за границы блока. При этом всегда сохраняются исходные пропорции
Правое изображение имеет фиксированные значения, которые не будут меняться при изменении ширины страницы.
Свойство имеет два зарезервированных значения:
- — Изображение масштабируется так, чтобы занять весь блок. В этом случае изображение может быть обрезано
- — Изображение масштабируется так, чтобы максимально покрыть область блока, но не обрезать само изображение
Такие значения можно встретить при создании верхних секций на сайте, где есть фоновое изображение на всю ширину экрана
Важно: при создании страниц и добавлении фоновых изображений важно следить, чтобы исходное изображение имело достаточное разрешение. При попытке растянуть небольшое изображение мы увидим пикселизованную картинку, что не добавляет странице привлекательности. Еще одно свойство, которое влияет на размер изображения —
Его действие похоже на свойство , которое отвечает за то, как браузер обрабатывает внутренние отступы и границы блока
Еще одно свойство, которое влияет на размер изображения — . Его действие похоже на свойство , которое отвечает за то, как браузер обрабатывает внутренние отступы и границы блока.
Свойство определяет, будет ли фоновое изображение располагаться на внутренних отступах или границах. Свойство принимает одно из значений:
- — фоновое изображение рисуется на всем блоке, включая внутренние отступы и границы
- — значение по умолчанию. Фоновое изображение рисуется в области блока и его внутренних отступов, но не учитывается размер границ, заданных свойством
- — фоновое изображение рисуется не по всему блоку, а по области контента внутри него
Взглянем на пример:
Видно, что изображения все равно накладываются на границы, например при значении , хотя ожидался другой эффект. Этот выход на границы связан с тем, что браузер не обрезает изображения, а граница не является сплошной.
Здесь поможет свойство , задача которого — точно определить, как обрезать изображение при его выходе за пределы блока. Как и , свойство принимает одно из трех значений:
- — обрезать по внешним границам элемента
- — обрезать по границам внутренних отступов
- — обрезать по границам контента
Еще одно значение — , которое до сих пор является экспериментальным, и предполагает обрезку изображения по границам текста. Со временем поддержка станет полной и значение можно будет использовать без опасения. Оно добавлено в пример, но может сработать некорректно в другом окружении.
Важно: свойство влияет не только на фоновое изображение, но и на фоновый цвет, установленный с помощью свойства
CSS. Выравнивание блочного элемента по правому краю.
Вчера, на работе, я пытался выровнять блочный элемент по правому краю. Такая задача встречается не часто, но даже когда она встречается, я использую inline-block или float , но можно обойтись без них.
Способ, о котором я расскажу, вам вероятно знаком. Одним из первых у верстальщиков встает вопрос о выравнивании элементов. Часто это центрирование блочных элементов через margin . Но я никогда не видел, чтобы кто-то использовал margin для выравнивания по правому краю. Думаю это из-за недопонимания механизма работы этого свойства со значением auto . Через него можно и по вертикали центрировать, но это тема отдельной статьи.
Демонстрация с тремя выравниваниями через margin .
Для выравнивания блочных элементов по центру, используется метод через margin auto .
Auto в данном случае говорит нам, что расстояние слева и справа блока, рассчитается браузером пропорционально,m основываясь на размере элемента и оставшимся местом. Так если элемент занимает 50% по ширине, боковые отступы станут одинаковыми, по 25%.
Для выравнивания по правому краю, используйте значение auto , но только для левого отступа.
Не забудьте, что элемент должен быть меньше чем у родителя и быть блочным.
За и против. Оформление незагруженных изображений.
Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.
Управляем поведением font-face в CSS
Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.
Атрибут «src».
Собственно, по-настоящему обязательный атрибут у тега <img> только один — это атрибут src. Атрибут src (от англ. source — источник) позволяет указать путь к изображению, которое должно быть отображено в HTML-документе. URL — обязательный параметр, который указывает браузеру, где находится изображение. В основном на сайтах используется графика файловых форматов: JPEG, GIF, PNG, BMP и SVG.
Если изображение находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только имя этого файла, например:
Пример HTML:
Попробуй сам
Если изображение находится на том же сервере, что и содержащий его HTML-документ, но в другом каталоге, следует указать имя каталога и имя файла с изображением, например:
Если изображение находится не на том сервере, на котором находится содержащий его HTML-документ, необходимо указать полный адрес файла с изображением, например:
При такой записи размер изображения на экране будет соответствовать его реальным размерам.
Размеры изображения и CSS
В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения.
Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.
Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства.
В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров.
В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.
Обратите внимание, как будет отображаться изображение при изменении размеров окна браузера. Если у вас достаточно большой экран, изображение должно отображаться в разных измерениях
Использование свойства position
Абсолютное позиционирование
Свойство position со значением absolute позволяет абсолютно позиционировать элемент на странице относительно ближайшего позиционированного родительского элемента. Если такого элемента нет, то относительно самого контейнера body. Абсолютное позиционирование позволяет элементу быть вынесенным из обычного потока документа и не занимать место внутри потока.
Относительное позиционирование
Свойство position со значением relative позволяет относительно позиционировать элемент на странице. Элемент остается в потоке документа и не занимает место других элементов на странице.
Фиксированное позиционирование
Свойство position со значением fixed позволяет зафиксировать элемент на странице, при этом он не будет двигаться при скроллинге страницы. Данный тип позиционирования удобен для навигационных элементов, которые всегда должны быть видны на странице.
Статическое позиционирование
Свойство position со значением static, которое устанавливается по умолчанию, позволяет элементам быть расположенными в обычном потоке документа.
При использовании свойства position стоит помнить о том, что оно может быть применено только к блочным элементам.
Важно следить за порядком родительских элементов при использовании свойства position, так как это может привести к неправильному позиционированию элементов на странице.
Атрибуты тега
| Атрибут | Значение |
| src | = URLURL — адрес или имя файла изображения |
| width | = «число»Ширина изображения |
| height | = «число»Высота изображения |
| alt | = «текст»Альтернатавный текст, который будет появлятся вместо графического изображения в рехиме «отключения загрузки графики». |
| align | Атрибут align тега <img> используется для выравнивания изображения относительно текста.
= absbottomВыравнивание нижней границы изображения по нижней границе текущей строки. = absmiddleВыравнивание середины изображения по середине текущей строки. = baselineВыравнивание нижней границы изображения по базовой линии текущей строки. = bottomТо же, что и baseline. = topВерхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. = texttopВерхняя граница изображения выравнивается по самому высокому элементу текущей строки. = leftИзображение располагается у левого края окна; = rightИзображение располагается у правого края окна; Для прекращения выравнивания изображения, заданного с помощью align=left или align=right, относительно текста используют Прекращение обтекания текстом изображений, выровненых по левому краю:<br clear=left> Прекращение обтекания текстом изображений, выровненых по правому краю:<br clear=right> Прекращение обтекания текстом изображений, выровненых либо по левому краю, либо по правому краю:<br clear=all> |
| border |
= «число»Толщина черной рамки вокруг изображения. Если атрибут не указан, то рамка не отображается. Если рисунок оформлен как ссылка, то для того, чтобы браузер (по умолчанию) не выделял рамку надо указать border=0 |
| vspace | = «число»Размер верхнего и нижнего пустого поля вокруг изображения. |
| hspace | = «число»Размер пустого бокового поля вокруг изображения. |
Обтекание картинки текстом в Html — атрибут Align тега Img
Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align. Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.
Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах (параграфах P, заголовках H1-H6 и т.п.).
Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.
Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:
По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align=»bottom» ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align=»top»:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="top">
В этом случае произошло выравнивание текста в строке, где расположена фотография, по верхнему ее краю.
Возможно еще одно значение этого атрибута align=»middle»:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="middle">
В этом случае текст в строке с картинкой будет выравниваться по середине этого самого рисунка.
Но кроме выравнивания по вертикали в Html предусмотрено и обтекание картинок текстом, для чего используются значения — Left и Right. Эта группа значений атрибута Align сильно отличается от предыдущей.
При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится плавающим элементом (аналог Float в CSS) и текст начинает ее обтекать.
Например, при align=»left» мы получим такой результат:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left">
Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align=»right» картинка будет плавать в правую сторону, а текст ее будет обтекать слева:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="right">
При задании обтекания изображения текстом есть один нюанс — текст слишком близко располагается от него, что создает неприятный глазу эффект прилипания. Данную проблему совсем легко решить с помощью CSS свойств padding или margin, но и в чистом Html существует свое решение.
Для этого можно использовать атрибуты элемента Img — Hspace и Vspace. С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в пикселах, например:
<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left" hspace="30" vspace="30">
Обтекание изображения текстом
Выравнивание изображения с одновременным обтеканием его текстом — один из популярных приёмов вёрстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с разных сторон. Для создания обтекания изображения текстом существует несколько способов, самый удобный, конечно же, связан с применением стилей.
Для обтекания картинки текстом применяется стилевое свойство float. Значение right будет выравнивать изображение по правому краю родительского элемента или окна браузера, а текст размещать слева от рисунка. Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 1). Элемент, для которого установлено значение float, обычно называется плавающим. Это название, конечно же, условное и говорит лишь о том, что текст или другие объекты будут обходить его с разных сторон, создавая обтекание.
Пример 1. Применение float
В данном примере вводится два класса с именами left и right, добавление которых к элементу <img> или <figure> выравнивает их по соответствующему краю. Чтобы текст немного отступал от картинки добавляется универсальное свойство margin. На рис. 1 показано выравнивание по левому краю.
Рис. 1. Выравнивание фотографии по левому краю