Изображения в HTML. Как вставить картинку, задать ей размер и выровнять на странице?

изображения в html. как вставить картинку, задать ей размер и выровнять на странице?

Вставка изображения

HTML позволяет разнообразить содержимое страницы с помощью добавления изображений. Для этого существует элемент <img>, который не требует указания закрывающего тега. Он имеет ряд атрибутов, позволяющих определить: откуда загрузить картинку, какого она размера, как задать её выравнивание и обтекание текстом. Всё это будет рассмотрено в данной статье.

Тег <img> предназначен для вставки изображений, имеющих форматы JPEG (сокр. JPG), PNG или GIF. Место расположения картинки указывается в атрибуте src. Путь должен быть относительным или абсолютным URL-адресом.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример вставки изображения в страницу</title>
    </head>
    <body>
        <h3>Логотип CoderBooster</h3>
        <img src="https://coder-booster.ru/images/main-logo.png">
    </body>
</html>

Выравнивание и обтекание текстом

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Вставка картинки внутрь строки</title>
    </head>
    <body>
        <!-- Блоку div мы задали ширину для наглядности примера -->
        <div style="width: 300px">
            <p>Этот текст будет поломан вставленным в него изображением
            <img src="https://coder-booster.ru/images/main-logo.png">
            нашего ресурса</p>
        </div>
    </body>
</html>
Вставка изображения без выравнивания коверкает обрамляющий текст
рис 1. Изображение ломает обрамляющий текст

Для решения проблемы нужно задать выравнивание изображению. В HTML это происходит с помощью атрибута align. Современные стандарты требуют использовать CSS для выравнивания, поэтому мы рассмотрим только два значения атрибута align.

Значения, которые может принимать атрибут align:

  • left — изображение будет перемещено к левому краю контейнера, а текст станет обтекать его справа.
  • right — выравнивание картинки происходит по правому краю контейнера, а текст обтекает её слева.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Выравнивание изображения с помощью атрибута</title>
    </head>
    <body>
        <!-- Блокe div мы задали ширину для наглядности примера -->
        <div style="width: 300px">
            <p>Этот текст будет обрамлять логотип нашего ресурса
            <img align="right" src="https://coder-booster.ru/images/main-logo.png">
            с левой стороны</p>
        </div>
    </body>
</html>
Выравнивание картинки заставляет текст плавно обтекать её
рис 2. Изображение выровнено по правому краю

Размер изображения

Важно понимать, что реальный размер изображения может не соответствовать пространству, отведенному на HTML-странице. Элементу <img> можно задать атрибуты width (ширина) и height (высота). Они явным образом определяют размеры, которые будет иметь картинка после загрузки.

Значения атрибутов width и height задаются в пикселях или в процентах. Если размеры изображения заданы в процентах, то занимаемое пространство рассчитывается относительно родительского элемента. Выражение, в котором высота картинки задана в процентах, а ширина в пикселях может выглядеть следующим образом «<img src="test.html" width="150px" height="50%">».

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Изменение размера изображения с помощью атрибута</title>
    </head>
    <body>
        <img src="some-test.html" width="300px" height="100%">
    </body>
</html>

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

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

Заметка
На самом деле необходимо указывать размеры для всех изображений. Неважно используете ли вы для этого атрибуты или CSS. Браузер сможет определить отведенное пространство для картинки еще до её загрузки, что предотвратит ужасные дерганья страницы.

Альтернативный текст

Стандарты W3C (аббр. Консорциум всемирной паутины) требуют добавления к каждому элементу <img> специального атрибута alt. Его значение должно содержать альтернативный текст, который в краткой форме описывает содержимое изображения. Это необходимо для лучшей индексации картинок поисковыми системами, а люди, использующие экранные дикторы, смогут понять их содержимое. Также этот текст будет показан пользователю вместо изображения, если браузер не сможет его загрузить.

Последние публикации