Урок 3.2: Размеры изображений

В языке HTML предусмотрена возможность указывать размер изображения.

Для этого существуют два атрибута - width (ширина) и height (высота)

Пример

<html>  <head>   <title>Размеры изображений</title>  </head>  <body>   <img src="/images/pic.jpg" width="200">  </body> </html>

При использовании этих атрибутов можно увеличить или уменьшить изображение.

Пример

<html>  <head>   <title>Выделение текста</title>  </head>  <body>   <img src="/images/pic.jpg" width="100">  </body> </html>

Результат

Уменьшенное изображение Изображение в натуральную величину

Cредствами html можно уменьшить изображение. Но нельзя уменьшить размер изображения: просто браузер отобразил изображение меньше. Это очень важно. Если у вас на странице (сайте) много изображений (например - фотогалерея) то большие изображения замедлят загрузку страницы.

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

Пример

<html>  <head>   <title>Выделение текста</title>  </head>  <body>   <img src="/images/pic.jpg" width="100" height="200">  </body> </html>

Результат - искажение изображения

Искаженное изображение

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

<< Вставка изображения | Перечень уроков | Подписи к изображению >>