HTML+CSS Работа с изображениями

Уроки HTML+CSS: Работа с изображениями

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

Вот пример добавления изображения на сайт <img scr="img/photo.jpg">

Вы так же можете сделать изображение-ссылку, прописав изображение во внутрь тега <a>. Вот как это выглядит <a href="http://www.vk.com"><img src="photo.png"></a>

Тег <img> добавляет картинку, но не задний фон. Задний фон задаётся в CSS стилях. Мы к этому ещё вернёмся.

Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.

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

Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height.

width – высота

height – ширина

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

<img src="Путь к изображению" width="200px" height="100px">

Атрибуты для тега img

Атрибут Описание, принимаемое значение
alt Атрибут alt добавляет альтернативный текст для изображения. Выводится если изображение еще не подгрузилось.
Синтаксис: alt="описание изображения".
crossorigin Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
Синтаксис: crossorigin="anonymous".
height Атрибут height задает высоту изображения. Может указываться в pxили %.
Синтаксис: height: 300px.
ismap Атрибут ismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент <img>является потомком элемента <a> с действительным атрибутом href.
Синтаксис: ismap.
longdesc URL расширенного описания изображения, дополняющее атрибут alt.
Синтаксис: longdesc="http://www.example.com/description.txt".
src Атрибут src задает путь к изображению.
Синтаксис: src="flower.jpg".
sizes Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset. Значением атрибута является одна или несколько строк, указанных через запятую.
srcset Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src. Значением атрибута является одна или несколько строк, разделенных запятой.

<img src="flower.jpg"
  srcset="
    img/flower-mobile.jpg 320w,
    img/flower-wide-mobile.jpg 480w,
    img/flower-tablet.jpg 768w,
    img/flower-desktop.jpg 1024w,
    img/flower-hires.jpg 1280w"
  sizes="
    (max-width: 20em) 30vw,
    (max-width: 30em) 60vw,
    (max-width: 40em) 90vw"
  alt="Роза в моём саду">
usemap Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа #. Значение ассоциируется со значением атрибута name или id тега <map> и создает связь между элементами <img> и <map>. Атрибут нельзя использовать, если элемент <map> является потомком элемента <a> или <button>.
Синтаксис: usemap="#mymap".
width Атрибут width задает ширину изображения. Может указываться в pxили %.
Синтаксис: width: 100%.

Немного о подключение

Думаю вы уже заметили что существуют 2 атрибута указывающие путь к файлу. Атрибут href используется в обычных ссылках (<a></a>) и в теге link, который подключает сторонние css файлы и библиотеки.

Второй атрибут, src используют для указание пути в теге <img>, а так же для указание пути к javascript файлу в теге script

Оставить комментарий

avatar
  Подписаться  
Уведомление о