Каждый веб-разработчик должен разбираться не только в HTML для создания своих проектов, но и в CSS. Этот инструмент помогает формировать детализированные и эффектные страницы, оснащенные разнообразной графикой и эффектами.
При работе с изображениями в HTML CSS имеет огромную значимость. Сегодня предстоит познакомиться с соответствующей операцией. Отдельное внимание будет уделено корректировке ширины и высоты картинки на экране.
Предложенная ниже информация пригодится широкому кругу лиц. Она подойдет для изучения как обычными ПК-пользователями, так и веб-программистами/дизайнерами. Опубликованные сведения – это основа работы с изображениями в HTML-коде через CSS.
Добавление картинки в код
HTML используется для формирования общей структуры веб-страницы или онлайн-сервиса. Перед тем как начать работать с размерами картинок на сайте, нужно сначала добавить их. Для этого используется тег <img>. Ширина и высота указываются в качестве атрибутов изображения. Эта информация прописывается разработчиком в пикселях.
Вот пример синтаксиса добавления нового изображения на страницу:
Здесь:
- Src – исходный код. Каждая картинка в HTML-коде поддерживает этот атрибут. С его помощью можно передать браузеру информацию о том, где искать необходимое для дальнейшей работы изображение. URL здесь – это местоположение картинки.
- Alt. Атрибут, который позволяет создать альтернативное описание для картинки. Используется, если изображение не может по тем или иным причинам отобразиться на странице. Значение данного атрибута – это текст, который заранее определяется пользователем. Он выступает своеобразной подписью.
Теперь, когда добавление рисунка на страницу закончено, можно перейти к корректировке его масштаба. В HTML существуют различные способы, с помощью которого верстальщик или разработчик изменяет высоту и ширину изображения. Далее эти приемы будут изучены более детально.
Работа с атрибутами
Ширина и высота рисунка, размещаемого в HTML-коде, могут быть заданы и скорректированы при помощи атрибутов. К ним относят:
- width – ширина;
- height – высота.
По умолчанию значения соответствующих атрибутов указываются в пикселях. Можно также задавать подобные параметры в процентах от «родительской» картинки.
Если у рисунка задана только ширина или высота, то второй параметр будет вычисляться автоматически. Во внимание система возьмет пропорции исходного изображения. Два заданных параметра высоты и ширины могут исказить реальную картинку и ее пропорции, особенно если они задаются неправильно.
Если же верстальщик использует картинку без заданных width и height, она отобразится с исходными параметрами. Вот синтаксис корректировки ширины и высоты рисунка через атрибуты:
Верстальщику необходимо запомнить следующие обозначения и их значения:
- Px: pixels – используется для обозначения размеров в пикселях. Это 1/96 дюйма.
- In: inches – используется для работы с дюймами. Это 96 пикселей или 2,54 сантиметра.
- Pt: points – используется для указания размеров в точках. Точка – это 1/72 дюйма.
Чтобы установить рисунок на всю ширину браузерного окна, рекомендуется использовать задание масштаба в процентах от ширины родительского (начального) изображения.
Сохранение соотношения сторон при корректировании размера рисунка
Искажения при неправильно заданных параметрах ширины и высоты рисунка в HTML-коде – распространенное явление. Картинка может потерять соотношение сторон, особенно если верстальщик не уделил расчетам width и height достаточного времени.
Соотношение сторон можно сохранить. Для этого рекомендуется использовать только атрибут width с конкретными параметрами. Для height нужно использовать свойство CSS – auto. Оно пишется в качестве значения атрибута.
Обратный принцип тоже действует. Это значит, что верстальщик может указать только атрибут height, а для width установить значение auto. Данный прием является не самым распространенным. Это связано с тем, что основная масса макетов ограничивается шириной, а не высотой.
Адаптивное изображение
При помощи указания ширины и высоты рисунка в процентах вместо абсолютных значений можно сделать его адаптивным. В этом случае изображение будет подстраиваться под необходимые параметры системы.
Если указать у атрибута width значение 100 %, картинка будет масштабироваться по мере необходимости. Происходить это будет с учетом соответствия ширины родительского (начального) рисунка. Данный прием способен привести к «размытости». Соответствующее явление вызвано тем, что рисунок может быть масштабирован до размеров, которые превышают исходные параметры картинки.
В качестве альтернативного решения допустимо использовать свойство CSS под названием max-width. Ему нужно установить значение 100 %. Картинка уменьшится, если в этом есть необходимость. А вот увеличение до размеров, которые превосходят исходные параметры, не произойдет ни при каких обстоятельствах. Для более корректного автоматического масштабирования рекомендуется использовать max-width 100, а height – auto.
Размещение в области элемента
Бывают ситуации, когда верстальщику требуется сохранить изначально соотношение сторон, пока рисунок покрывает всю область, даже если какая-то его часть обрезана. Для этого допустимо использовать несколько приемов:
- фоновое изображение;
- CSS-свойства object-fit.
Далее соответствующие концепции будут рассмотрены более подробно. Эта информация будет полезна не только опытным верстальщикам, но и новичкам.
Изменение размеров через фоновые изображения
У CSS есть достаточно мощное свойство – background-image. Оно дает возможность вставлять рисунки в элементы, которые отличаются от img. С помощью данного свойства получится управлять масштабированием рисунка, а также его обрезкой. Для этого применяются такие атрибуты как:
- background-size – размер рисунка;
- background-position – начальная позиция фонового изображения.
По умолчанию фоновое изображение отображается в исходном полном размере. Переопределение осуществляется через первый в списке атрибут. Масштабирование поддерживается сверху или снизу – на усмотрение верстальщика.
Данное свойство может иметь такие значения как:
- auto – отображение рисунка в полном размере;
- length – установка ширины и высоты в пикселях;
- percentage – установка высоты и ширины в процентах от родительского рисунка.
Также у background-size есть два специальных значения: contain и cover. Первое используется для сохранения соотношения сторон рисунка, но размер изображения изменяется так, чтобы оно было полностью видимо. Наибольшая высота или ширина будет соответствовать заданным размерам, независимо от «габаритов» содержащего поля.
Cover используется для сохранения соотношения сторон, но с изменением размера картинки так, чтобы оно покрывало весь контейнер. Это должно происходить, даже если для реализации задачи потребуется увеличить рисунок или обрезать его.
Свойство object-fit
У элемента img есть CSS-свойство object-fit. Оно используется для указания того, как рисунок должен меняться в размерах и обрезаться, чтобы соответствовать имеющемуся контейнеру.
Object-fit предусматривает следующие ключевые значения:
- Contain. Отвечает за сохранение исходного соотношения сторон, но рисунок будет менять размер так, чтобы он был виден полностью. Наибольшая высота/ширина соответствует заданным параметрам, независимо от размеров содержащего его поля.
- Cover. Используется для сохранения соотношения сторон картинки. Ее размер будет меняться так, чтобы он полностью охватывал контейнер. Операция происходит даже при необходимости увеличения масштаба или обрезки изображения.
- Fill. Значение по умолчанию. Картинка будет заполнять всю указанную верстальщиком область. Принцип действует даже тогда, когда подобное размещение приводит к потере пропорций.
- None. Размер изображения меняться не будет. Его исходные параметры позволяют заполнить все указанную область.
Рекомендуется использовать object-position для управления начальными позициями рисунка, когда рендерится обрезанная часть изображения.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
