Элемент img
Применяется как основной способ вставки изображения в HTML-документ:
<img alt="nice flower" src="flower1.jpg" />Элемент img - строчный, и его можно вставлять непосредственно в текст абзаца, пункт списка или ячейку таблицы - при этом не происходит начала новой строки.
К необходимым атрибутам относятся src (источник) - путь к изображению, который может быть указан относительно текущего HTML-документа (flower1.jpg ; images/flower1.jpg и т.п.), относительно от корневого каталога сайта (/images/flower1.jpg) либо абсолютно (http://site.com/images/lower1.jpg), а также alt - альтернативный текст, отображаемый в том случае, когда изображение не показывается (например, если показ изображений отключен в настройках браузера) и произносимый синтезатором речи.
Допустимые форматы изображений стандартом не определены, и браузеры могут вести себя по-разному, однако фактически стандартами стали форматы GIF, JPEG и PNG:
- Формат GIF (Graphics Interchange Format) - сжатие изображения без потерь, с поддержкой прозрачности и анимации, 8-битный цвет (256 вариантов);
- Формат JPEG (Joint Photographic Experts Group) - сжатие регулируемой глубины с потерями, 16-битный цвет;
- Формат PNG (Portable Network Graphics) - сжатие регулируемой глубины, широкий выбор цветовых форматов (24-битный цвет, оттенки серого, 8-битовая цветовая палитра), поддержка многослойной прозрачности.
Как правило, JPEG хорош для фотографий, позволяя достичь наилучшего сжатия с минимальными потерями, а GIF и PNG - для схем и пиктограмм.
Также часто для элемента img указывают ширину и высоту посредством задания значения атрибутов width и height. Браузер не может верно скомпоновать макет страницы, не зная размеров входящих в неё изображений, поэтому в том случае, если эти атрибуты не указаны, браузер должен будет делать отдельный запрос к веб-серверу (изображения всегда загружаются отдельно от разметки). Возможны ситуации, когда браузеру знать размеры изображения необходимо, но загружать само изображение не нужно, поэтому width и height рекомендуется, как правило, указывать. Очевидно, эти атрибуты позволяют также изменять масштаб и пропорции изображения на веб-странице, однако, следует иметь в виду, что увеличение масштаба для точечных изображений всегда ведёт к существенной потере качества, а уменьшение таким способом, как правило, не вполне оправдано: если изображение должно быть меньше, то почему бы не уменьшить сам файл изображения? Иначе по сети передаётся больший объём, чем необходимо.
Возможно указание размеров изображения в процентах от ширины окна браузера (обычно указывают ширину, а высота устанавливается браузером исходя из соблюдения пропорций). В этом случае изображение может быть растянуто слишком сильно - для ограничения ширины следует использовать свойство max-width со значением в пикселах.
<style type="text/css"> .percent_size { width: 30%; min-width: 200px; } img { margin: auto; } </style> <img class="percent_size" src="Crataegus.jpg" alt="Crataegus" /> <img class="percent_size" src="Cypripedium M.jpg" alt="Cypripedium macranthos Sw" /> <img class="percent_size" src="Cypripedium C.jpg" alt="Cypripedium calceolus" />Листинг 8.1. Процентное задание размеров изображений
Рис. 8.1. Процентное задание размеров изображений
Упражнение. Откройте пример в новом окне и убедитесь, что изображение изменяет свою ширину пропорционально ширине окна браузера, но не уменьшается после указанного предела (Windows Explorer ведёт себя при уменьшении довольно странно). Добавьте ограничение сверху на ширину изображений, просмотрите страницу в действии.
Дата: 2019-02-02, просмотров: 216.
