Css img relative height

doctor Brain

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

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

Изображение фиксированного размера

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

Так как мы не знаем размеры и пропорции исходного изображения, применим CSS-свойство object-fit . Таким образом, мы сможем быть уверены, что картинка не деформируется.

Результат можно увидеть на нижеприведенной иллюстрации. Заметьте: исходное изображение имеет большую ширину, но оно не подверглось искажениям, вместо этого оно “обрезано” по центру:

Свойство object-fit принимает значения fill , contain , cover , none , scale-down . Подробно информацию можно изучить на сайте MDN.

Изображение нефиксированного размера

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

/* Position child elements relative to this element */ .aspect-ratio-box < position: relative; >/* Create a pseudo element that uses padding-bottom to take up space */ .aspect-ratio-box::after < display: block; content: ''; /* 16:9 aspect ratio */ padding-bottom: 56.25%; >/* Image is positioned absolutely relative to the parent element */ .aspect-ratio-box img < /* Image should match parent box size */ position: absolute; left: 0; top: 0; width: 100%; height: 100%; >

Приблизительно так будет выглядеть результат при соотношении сторон 16:9:

Свойство padding-bottom определяет высоту родительского контейнера, выраженную в процентах от его ширины. Например, при ширине блока 400px результирующая высота составит 56,25% от 400px, то есть около 225px.

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

Например, при соотношении сторон 16:9, арифмитические манипуляции будут выглядеть так:

Выразим результ в процентах (умножим полученное число на 100):

Заключение

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

Полезно прочитать

Новые публикации

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика

Источник

doctor Brain

Как управлять размерами изображения с помощью CSS?

Существует несколько способов управления размерами изображения при подготовке адаптивной верстки

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

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

Способ: мне нужно это срочно

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

Этот способ уже всем надоел. Это читинг.

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

Способ из будущего

А что Вы скажете, если метод, описанный выше, можно использовать для img ? Что же, скажите “Привет!” CSS свойству object-fit, которое работает, в том числе, и для видео:

Прекрасно. Вы видите, как используется наше любимое значение cover , а еще мы можем указать contain .

В чем подвох?

Способ “Netflix”

Вы скажете: “Прикольно. Еще один способ, который не работает с IE и браузерами старых версий”. Не беспокойтесь, вот мой любимый метод, и он работает всегда и везде. Нам нужно всего-лишь обернуть картинку в блок с относительными отступами (relative padded parent).

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

Это слишком сложно? Но, поняв принцип данного метода, Вы сможете пользоваться им постоянно. К тому же, этот способ очень популярен, Netflix предпочитает именно его.

Простой способ

Ну и конечно, Вы должны знать такой метод:

Если Ваш макет достаточно прост, это способ обязательно подойдет.

Производительный способ

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

Для современных браузеров есть srcset — свойство, позволяющее выбирать загружаемые картинки в зависимости от ширины экрана. Используется в сочетании с HTML5 тегом picture и соответсвует прниципам постепенной деградации (graceful degradation):

Заключение

1. Если картинка не имеет контентного значения (то есть бесполезна для SEO), пользуйтесь background-image ,
2. Если IE не Ваша тема, пользуйтесь object-fit ,
3. Метод с относительными отступами, который так любит Netflix, будет работать всегда и везде,
4. Если верстка достаточно проста, Вам поможет height: auto; ,
5. Если нужно поработать над скоростью загрузки изображений, используйте srcset .

Подготовлено по материалам оригинальной статьи Adrien Zaganelli “Time-saving CSS techniques to create responsive images”.

Новые публикации

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика

Источник