Html изображения

Изменение размеров изображений в HTML

По умолчанию все браузеры показывают изображения в их натуральные размеры. Но при помощи атрибутов width и height тега <IMG> можно изменить их высоту и ширину. Значения указываются в числах, которые означают размеры в пикселях (ставить в конце чисел буквы px не нужно) или процентах, в этом случае в конце надо поставить знак %.

Пример изменения размеров изображений

Результат в браузере

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

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

Ребята, еще раз хочу обратить ваше внимание на то, что только в размерах атрибута style указываются единицы измерения пиксели и пункты (px, pt), а все потому, что он относится к CSS. У всех (абсолютно всех) остальных атрибутов HTML, которые мы с вами изучили и еще изучим, пиксельный размер пишется просто цифрами, без указания единиц измерения

И только процентные размеры и там и там указываются со знаком %. Кстати, ошибки связанные с этой путаницей занимают одно из первых мест у новичков, так что перечитайте это примечание еще раз и будьте внимательны.

Scaling Web Page Elements Using The CSS3 Scale Transform

Это связано с тем, что в HTML изображения являются блочными элементами. Это значит, что браузер отображает разрывы строки до и после изображения. Мы изменим это поведение по умолчанию с помощью CSS. Но сначала добавим к нашему элементу изображения значение класса:

<p> <img src=»images/headshot-picture.jpg» alt=»Снимок лица» class=»left» /> Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке. </p>

Стили CSS

Включив в HTML-код атрибут класса «left», можно перейти к vertical align central float left. Мы добавим в таблицу стилей правило, которое задаст смещение изображения. А также несколько дополнительных правил, которые обеспечат, чтобы текст не прилегал к изображению вплотную, обтекая его.

Вот CSS-код:

.left { float: left; padding: 0 20px 20px 0; }

Этот код смещает изображение влево и добавляет небольшие отступы справа и снизу от изображения.

Если просмотреть в браузере страницу, то изображение в ней будет выровнено по левому краю, а текст абзаца будет отображаться справа от него с соответствующим отступом. Одно замечание относительно значения класса «left«, которое мы использовали. Имейте в виду, что это значение является произвольным. Мы могли бы назвать класс как угодно, а термин «left» сам по себе ничего не делает.

Нам просто нужно задать атрибут класса в HTML, который связан с фактическим стилем CSS float left, а он уже определяет визуальные изменения, которые необходимо произвести.

Альтернативные способы

Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS, который смещает элемент, это только один способ «выравнивания по левому краю». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса «main-content«:

<div class=»main-content»> <p> <img src=»images/headshot-picture.jpg» alt=»Снимок лица» class=»left» /> Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке. </p> </div>

Задать стили для изображения можно с помощью следующего кода CSS:

.main-content img { float: left; padding: 0 20px 20px 0; }

Изображение будет выровнено по левому краю, текст будет обтекать его, как и раньше, но нам не нужно добавлять дополнительное значение класса в разметку. Этот способ выравнивания float left по центру позволит создать меньший HTML-файл, что повысит производительность.

Также можно добавить стили непосредственно в HTML-разметку, например:

<p> <img src=»images/headshot-picture.jpg» alt=»Headshot photo» style=»float:left;margin:0 20px 20px 0;» /> Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке. </p>

Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.

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

Перевод статьи «How To Float an Image to the Left of Text on a Webpage» дружной командой проекта Сайтостроение от А до Я.

Атрибуты и свойства тега

1. Свойство align=»параметр» — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:

• left — выравнивание по левому краю
• middle — выравнивание середины изображения по базовой линии текущей строки
• bottom — выравнивание нижней границы изображения по окружающему тексту
• top — верхняя граница изображения выравнивается по самому высокому элементу текущей строки
• right — выравнивание по правому краю

Пример 3.1. Выравнивание изображения в html по правому краю

Преобразуется на странице в следующее:

2. Свойство alt=»текст» — подсказка/описание картинки. Выполняет сразу две важные функции:

• Выдает подсказку при наведении
• Если в браузере отключены изображения, то выводится этот текст

Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.

3. Свойство border=»ЧИСЛО» — задает толщину рамки обтекающей изображение. Измеряется в пикселях. Более подробно читайте в отдельной статье: свойство CSS border

Пример 3.2. Вывод картинки в html с рамкой (границей)

Преобразуется на странице в следующее:

4. Свойство bordercolor=»цвет» — задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.

Пример 3.3. Вывод картинки в html с цветной рамкой

Результат можно видеть чуть выше.

Примечание

Атрибуты border и bordercolor можно задать в стилях CSS к img:

5. Свойство height=»ЧИСЛО» — задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.

6. Свойство width=»ЧИСЛО» — задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.

7. Свойство hspace=»ЧИСЛО» — задает горизонтальный отступ изображения в пикселях от других объектов html.

8. Свойство vspace=»ЧИСЛО» — задает вертикальный отступ изображения в пикселях от других объектов html.

Примечание

Вместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:

• margin-top: X px; (X — отступ сверху)
• margin-bottom: Y px; (Y — отступ внизу)
• margin-left: L px; (L — отступ слева)
• margin-right: R px; (R — отступ справа)

Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.

Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.

Преобразуется на странице в следующее:

В данном примере — отступ сверху составил 10 пикселей, слева 50 пикселей.

9. Свойство class=»имя_класса» — можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.

Фоновый рисунок большой ширины

Предыдущий способ, хотя и применяется достаточно часто и дает вполне подходящий
результат, все же не устанавливает один рисунок на всю ширину макета. Для достижения
этой цели применяют следующий алгоритм. Вначале подготавливается изображение
достаточно большой ширины (от 1000–1200 пикселов), после чего оно ставится как
фоновый рисунок для определенного слоя.

Большая ширина рисунка обеспечивает просмотр фактически при любом разрешении
монитора, кроме, разве что, самого фантастического и редко используемого. Если
такой рисунок просто добавить через тег <img>,
то однозначно получим горизонтальную полосу прокрутки и расползающийся по всем
швам макет страницы. Использование изображения как фона и обеспечивает отсутствие
ненужной полосы прокрутки. При этом картинка будет занимать всю ширину макета,
но ее часть будет скрыта от глаз пользователя, и появляться только при увеличении
окна браузера. На рис. 6 показан такой фоновый рисунок. Видно, что часть изображения
не помещается в окне, но оставшийся фрагмент занимает всю доступную ширину.

Рис. 6. Фоновый рисунок в окне браузера

Применяется опять же
свойство background, в качестве его значения задается путь к фоновой
картинке и ее параметры. Так, значение right top
говорит, что правый край изображения будет фиксироваться, а при изменении ширины
окна браузера станет появляться левая невидимая часть картинки. Если это значение убрать, то по умолчанию будет фиксироваться левый край (пример 4).

Пример 4. Рисунок на всю ширину страницы

При использовании фонового рисунка следует учитывать свойственные этому методу
ограничения. А именно:

• рисунок должен быть таким, чтобы при обрезании части изображения он не терял
  свою информативность;
• большая ширина предполагает и большой объем графического файла, который
  следует ограничить за счет уменьшения числа цветов, снижения качества картинки
  или другими параметрами.

Параметр HEIGHT и WIDTH

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Для изменения размеров изображения средствами HTML предусмотрены параметры
height и width. Допускается
использовать значения в пикселах или процентах. Если установлена процентная
запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <IMG>.
В случае отсутствия родительского контейнера, в его качестве выступает окно
браузера. Иными словами, width=»100%»
означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление
только одного параметра width или height
сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает
полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

Это утверждение особенно важно для изображений,
размещенных внутри таблицы

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

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

А вот увеличение размеров приводит к обратному эффекту — размер
изображения велик, но файл относительно изображения аналогичного размера загружается
быстрее. Но качество рисунка при этом ухудшается.

Значение по умолчанию

Исходная ширина или высота изображения.

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег IMG, параметр width</title>
</head>
<body>
<p><img src=»sample.gif» width=»150″
height=»150″ alt=»»></p>
</body>
</html>

Поворот nекста cредствами CSS

В этой статье мы предлагаем вам пример использования спрайта и чуточки кода CSS для того чтобы расположить все элементы правильно. Хотя, может и не такую уж чуточку. Ситуация напоминает, когда вы хотите поперчить тарелку с едой, но крышечка слетает, и у вас получается горка перца. Обычно после этого чихают.

К счастью, во многих современных браузерах имеется поддержка функции вращения HTML-элементов. Более того, мы можем заставить наш пример работать в Internet Explorer (даже в версии 5.5). Вы спросите: «как!?». Хорошо, давайте взглянем на код HTML.

<div class=»example-date»><span class=»day»>25</span><span class=»month»>Июн</span><span class=»year»>2011</span></div>

Красивый и опрятный код и ничего лишнего. Мы подсознательно выбрали такой порядок дат, чтобы избежать запятых. В противном случае, нам мог бы понадобиться дополнительный span, чтобы убрать запятые в финальной версии дизайна.

Создаем гиперссылки с помощью html тега ссылки «A»

Ссылка — один из основных элементов организации документа в Html. Без них вебстраница была бы просто страницей. Они создаются при помощи тега «А». Обязательным атрибутом является только Href. Он задает URL (путь), куда должен перейти пользователь щелкнув по данной гиперссылке.

Ссылка может вести как на внутреннюю страницу вашего же ресурса (очень важный момент внутренней оптимизации связан именно с перелинковкой страниц сайта)), так и на страницу другого проекта. Html тег A является парным и, соответственно, имеет закрывающий элемент. Текст гиперссылки (анкор — тут про него подробно написано в плане способствования SEO продвижению) размещается между открывающим и закрывающим тегами «A».

Пример:

<a href="https://ktonanovenkogo.ru">Анкор (если ссылка используется для внутренней перелинковки, то этот текст должен содержать ключевые слова, по которым вы хотите продвигать статью, на которую ведет эта ссылка) </a>

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

<a href="https://ktonanovenkogo.ru">Анкор</a> (если ссылка используется для внутренней перелинковки, то этот текст должен содержать ключевые слова, по которым вы хотите продвигать статью, на которую ведет этот линк) 

Открывание в новом окне и ссылка с картинки (изображения)

Ну, ладно, это мы опять отвлеклись на поисковую оптимизацию. Вернемся снова к тэгам. Для html тега «A» имеется один очень нужный атрибут, который позволит открывать страницу, на которую ведет данная ссылка в новом окне. Это может понадобиться, если вы с одной своей страницы ссылаетесь на множество внешних документов. В этом случае посетителю было бы удобнее, чтобы ваша страница оставалась всегда открытой.

Target для этой цели имеет параметр, позволяющий открывать страницу в новом окне, который называется _BLANK. Если Target не задан в теге A, то ссылка будет открываться в этом же окне. Пример использования атрибута Target:

<a href="https://ktonanovenkogo.ru" Target="_blank">Анкор (если ссылка используется для внутренней перелинковки, то этот текст должен содержать ключевые слова, по которым вы хотите продвигать статью, на которую ведет эта гиперссылка) </a>

Обратите внимание, что порядок следования атрибутов внутри тегов никак не регламентирован. С таким же успехом можно написать:. В качестве анкора для html тега ссылки вместо текста может использоваться изображение

В этом случае Img заключается в открывающий и закрывающий теги A:

В качестве анкора для html тега ссылки вместо текста может использоваться изображение. В этом случае Img заключается в открывающий и закрывающий теги A:

<a href="https://ktonanovenkogo.ru" Target="_blank"><Img src="https://ktonanovenkogo.ru/image/finik.jpg" Width="200" Height="150"> </a>

Есть мнение, что поисковики выше ценят ссылки с картинки, а по некоторым данным выходит обратное. Но при использовании такого типа линков нет анкора, в который можно было бы вставить нужные ключевые слова. В этом случае можно использовать атрибут Title для тега A.

<a href="https://ktonanovenkogo.ru" Title="Анкор" Target="_blank"><Img src="https://ktonanovenkogo.ru/image/finik.jpg" Width="200" Height="150"> </a>

Title можно использовать и в случае обычного текстового анкора. В этом случае информация прописанная в нем будет видна, если подвести курсор мыши к гиперссылке. Собственно, этот атрибут можно использовать практически во всех тегах языка Html, но особого толку от этого не будет.

<a href="https://ktonanovenkogo.ru" title="Анкор " Target="_blank" >Здесь нужно прописать ключевые слова, по которым вы хотите продвинуть статью, на которую ведет эта гиперссылка </a>

Использовать минификацию HTML, CSS и JS

Еще один способ уменьшить код — сократить его. В коде часто остаются комментарии, ненужные фрагменты, разрывы строк, разделители блоков и лишние пробелы, библиотеки JavaScript, которые не используют. Ненужные символы можно удалить, для этого проводят минификацию CSS, JS, HTML-файлов.

Минификация помогает уменьшить размер фрагментов кода JS, она не влияет на сам файл, но оптимизирует его и уменьшает размер, за счет чего повышается скорость загрузки. Файлы, прошедшие минификацию, получают расширение «.min». После минификации в CSS, HTML, JS-файле не будет разделителей, переносов, лишних пробелов, поэтому его будет сложнее читать.

Бесплатные инструменты для минификации CSS, JS, HTML-файлов

Собрали несколько бесплатных онлайн-инструментов для сокращения кода.

• minifycode.comПростой бесплатный онлайн- инструмент для минификации кода HTML, CSS и JavaScript файлов в отдельных полях.
• willpeavy.com/minifierДругой простой инструмент для минификации HTML, CSS или JS в один клик без дополнительных настроек.
• letteros.com/compressor
• Инструмент в два клика сжимает код JS, HTML и CSS, нужно только вставить код в поле и выбрать формат.
• htmlcompressor.comИнструмент позволяет выбрать уровень минификации HTML и встроенного в него кода CSS и JS, отметить расширенные настройки.
• jscompress.comИнструмент для сокращения файлов JS. Можно загружать файл и минифицировать несколько одновременно.
• askapache.com/online-tools/compress-cssИнструмент для быстрой минификации CSS без настроек — загружаете код и получаете результат.
• csscompressor.com
  Инструмент дает установить одну из четырех степеней минификации CSS и размер итогового файла.

Тень картинки.

box-shadow

Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

1. —  inset —  тень внутри элемента, без inset тень будет наружу;
2. — сдвиг тени по горизонтали (6px — вправо, -6px — влево);
3. — сдвиг по вертикали (6px — вниз, -6px — вверх);
4. — размытие тени (0 — четкая тень);
5. — растяжение тени (3px — растяжение, -3px — сжатие);
6. — цвет тени

box-shadow: 0 0 5px; — тень вокруг элемента

box-shadow: inset 0 0 5px; — тень внутри

Пример:

<html>
 <head>
 <title>Изображение</title>
 <style>
 img {
 box-shadow: -19px 0 22px -19px #000, 19px 0 22px -19px #000;
 }
 </style>
 </head>
 <body>
 <p><img src="картинка.jpg" alt=""></p>
 </body>
</html>

Результат:

GRUB 2

Трансформация только фона

У контейнера может не быть никаких стилей, но необходимо задать position: relative, поскольку наш псевдоэлемент располагается внутри. Также установите overflow: hidden, в противном случае фон будет выходить за пределы контейнера.

Теперь мы можем создать абсолютно позиционированный псевдоэлемент с трансформируемым фоном. Свойство z-index задаём как -1, это гарантирует что фон появится под содержимым контейнера.

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

Увеличение изображения через ссылку

Увеличение изображения через ссылку — самый простой способ без применения каких-либо CSS. Просто ставим ссылку на изображение с большим размером.

Пояснение к примеру:

• rel=»nofollow» — для того, чтобы ссылка не передавала вес изображению ;
• target=»_blank» — изображение откроется в новой вкладке.

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

Пример работы:

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

Цены

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

В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения.
Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства.
В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров.
В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

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

Использование бесшовного фонового изображения

Вначале следует подготовить фоновый рисунок, он обязательно должен быть таким, что
если рядом положить две одинаковые картинки, то они сливаются в одну, и между
ними не возникает заметных артефактов. Пример такого изображения показан на
рис. 2.

Рис. 2. Изображения для создания фона

Ширину рисунка достаточно сделать 20–30 пикселов.

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

Сам фон представляет интерес лишь как часть общего результата. Это значит,
что на фоновую область следует наложить еще один рисунок так, чтобы вместе они
образовали единое целое. На рис. 3 показано изображение, правый край которого
совпадает с фоновым рисунком. Поэтому при наложении этого рисунка на фон они
точно совпадут.

Рис. 3. Картинка для наложения на фон

Данное изображение должно выравниваться по левому краю окна браузера, поскольку
правый край рисунка совмещается с фоном. Именно в этом случае и картинка и фон
образуют цельное изображение. В примере 2 приведено создание подобного
блока за счет использования стилевого свойства background.

Пример 2. Фоновая картинка

В данном примере высота блока задается с помощью свойства height,
она совпадает с высотой рисунка, а его ширина по умолчанию равна auto,
иными словами, занимает всю доступную ширину. Повторение фона происходит только
по горизонтали, это обеспечивает значение repeat-x свойства background.

Использовать фоновый рисунок не всегда обязательно, иной раз вполне подойдет
и одноцветная заливка прямоугольной области. Чтобы гармонично расположить изображение
на таком фоне применяют тонирование рисунка (сепия, как это еще называется)
или градиентный переход, как показано на рис. 4.

Рис. 4. Изображение с градиентом для размещения на цветном фоне

Графические файлы в формате JPEG не всегда подходят для наложения на цветной
фон из-за того, что этот формат вносит искажения в рисунок. За счет этого, гладкого
перехода от изображения к фону может не получиться, поскольку будет виден заметный
стык. В этом случае лучше применять формат GIF или PNG.

При использовании одноцветного фона код незначительно поменяется (пример 3).
Повторять фон теперь не нужно, поэтому свойство background
будет иметь только одно значение — желаемый цвет фона.

Пример 3. Цвет фона

В данном примере устанавливаем параметры блока — его высоту и цвет, а
также характеристики текста заголовка. Полученный результат продемонстрирован
на рис. 5.

Рис. 5. Совмещение цвета фона и рисунка

Его высочество background

Для того чтобы растягивать, форматировать и всячески видоизменять фоновое изображение, нужно знать лишь одно универсальное свойство – background. С его помощью можно указывать сразу несколько характеристик рисунка: определять цвет и/или фоновое изображение, устанавливать размер, способ позиционирования, скролирование, повторение и т.д.

Все это можно указывать как в выше названом свойстве, так и в конкретных элементах css. Ниже я описал отдельные элементы, редактирующие задний фон, и структурировал их в таблицу.

Свойство	Назначение
background-image	Определяет картинку фона. Может существовать вместе с указанием фонового цвета. Последний будет виден пользователю в 3 случаях: ·       Пока изображение грузится; ·       Если рисунок недоступен для просмотра; ·       Если на картинке имеются прозрачные области. Можно устанавливать путь к графическому файлу, очищать значение (none) или наследовать от предка (inherit). В спецификации css3 появилась возможность перечисления нескольких фоновых изображений. К этому дополнению я вернусь чуть позже.
background-attachment	Отвечает за скролирование объекта. Может быть прокручиваемым вместе с контентом (scroll), фиксированным (fixed) или наследоваться от родителя (любимое слово inherit).
background-clip	Указывает способ отображения краев графического файла под границами (чтоб увидеть разницу используете пунктирные border-ы или прозрачные). Можно установить 3 параметра: 1.    content-box – фон расположен только внутри текста или другого вида контента 2.    padding-box – фон виден внутри рамки 3.    border-box выводит фон под border-ом.
background-color	Устанавливает фоновый цвет.
background-position	Отвечает за расположение картинки заднего фона по вертикали (top, center, bottom) и по горизонтали (left, center, right). Также можно указывать расположение в единицах измерения (px, %, em и т.д.). Иногда используются отдельные свойства для определения вертикального (background-position-y) или горизонтального (background-position-x) позиционирования.
background-repeat	Задает повторяющееся отображение фоновых картинок. Повторы могут осуществляться по горизонтали (repeat-x), вертикали (repeat-y), по двум направлениям (repeat), не дублироваться (no-repeat). В css3 можно устанавливать одновременно 2 значения, а также использовать space – видимая область заполняется дубликатами рисунка и round – картинка повторяется целое число раз.
background-size	Определяет размер изображения.  Спецификация css3 предусматривает 2 новых ключевых свойства: ·       cover – растягивает фон на весь экран, сохраняя пропорции ·       contain – масштабирует фоновый рисунок так, чтобы он заполнил блок.
background-origin	Работает только в случае, если изображение скролируется. Поддерживает определение сразу нескольких значений. Указывает способ позиционирования объектов. Использует такие ключевые слова: ·       content-box – изображение выводится с самой верхней левой точки контента ·       padding-box – название говорит само за себя: позиционирование происходит относительно внутренней границы ·       border-box – объект располагается, начиная с линии border.

Интернет-маркетинг от GeekBrains

Статьи по теме

Почему индикатор батареи не дает точных показаний?

Использование атрибутов

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

Пример 1. Размеры в пикселях

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
</head>
<body>
<img src=»image/redcat.jpg» alt=»Размеры не заданы»>
<img src=»image/redcat.jpg» alt=»Задана ширина» width=»400″>
<img src=»image/redcat.jpg» alt=»Задана ширина и высота» width=»400″ height=»400″>
</body>
</html>

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

Рис. 1. Размеры фотографии

Аналогичным образом задаются размеры в процентах от ширины родительского элемента, таким образом можно установить картинку на всю ширину окна браузера. В примере 2 показано добавление трёх фотографий в ряд, ширина которых привязана к ширине окна.

Пример 2. Размеры в процентах

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
figure {
width: 27%; /* Ширина */
float: left; /* Выстраиваем элементы по горизонтали */
margin: 0 0 0 3.5%; /* Отступ слева */
background: #f0f0f0; /* Цвет фона */
border-radius: 5px; /* Радиус скругления */
padding: 2%; /* Поля */
}
figure:first-child {
margin-left: 0; /* Убираем отступ для первого элемента */
}
</style>
</head>
<body>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка» width=»100%»>
</figure>
</body>
</html>

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента <figure> устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого <figure> отступ слева нам не нужен, поэтому его убираем через свойство margin-left. Результат данного примера показан на рис. 2.

Рис. 2. Масштабирование фотографий

Проблема фиксированного соотношения сторон

Описанная выше проблема рассматривалась несколькими организациями по стандартизации.

Рабочая группа CSS (CSS Working Group) предложила свойство , о котором писала Rachel Andrew. Как только браузеры начнут поддерживать его, будет решена проблема сложности кода и пример выше будет упрощён до следующего вида:

Намного лучше! Это особенно полезно для видео, где нам обычно доступен набор часто используемых соотношений сторон, позволяя создать несколько классов для каждого размера. Возможно, это менее полезно для изображений, где размеры менее стандартизированы, из-за чего остаются нерешёнными ни проблема №1 с необходимостью отдельного CSS-правила для каждого изображения, ни проблема №3 с необходимостью разработчикам не забывать применять этот код. Следовательно, это шаг вперёд, но пока что не решение всех проблем.

Помимо этого, Web Incubator Community Group (WICG) — группа разработчиков браузеров и других заинтересованных сторон, способных экспериментировать с технологиями ещё до формальной стандартизации — также предложили свой вариант решения. Речь об атрибуте , который в коде выглядит следующим образом:

Так как это HTML-атрибут, он может быть установлен для каждого изображения (решая проблему №1 с необходимостью отдельного CSS-правила для каждого изображения) и относительно легко задаётся (решая проблему №2 с необходимостью запоминать большой объем кода), но всё ещё остаётся актуальной проблема с популярностью, если только сообщество не станет активно его продвигать.

У нас уже есть распространённый, хорошо известный метод установки и для элементов (даже если он не используется так часто, как хотелось бы), поэтому другие подобные решения неизбежно будут испытывать проблемы с принятием. И вот тут сам собой появляется ответ (теперь кажущийся очевидным).

Jen Simmons предложила элегантное и простое решение, которое она придумала вместе с fantasai:

Вместо введения фиксированного значения свойства , здесь используется CSS-функция , чтобы задать соотношение сторон, соответствующее атрибутам и , заданным в HTML. Функция уже некоторое время существует, но имеет очень ограниченную область применения — все браузеры поддерживают её при использовании в свойстве «content», например, . Но для других свойств .

Если бы функция работала и в других свойствах, с её помощью можно было получать значение атрибутов и и использовать для расчёта значения свойства , как в примере выше. Это решило бы проблему №1 (не требовалось бы вручную задавать соотношение сторон ни в HTML, ни в CSS), проблему №2 (небольшой объем кода для запоминания) и, как мы увидим дальше, это очень простое решение проблемы №3 (принятие разработчиками).

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

• для элемента задан HTML-атрибут

• для элемента задан HTML-атрибут

• (или ) задаётся в CSS — в том числе, с использованием процентных значений вида

• (или ) устанавливается на в CSS

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

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