Css img cover: html — Аналог background-size: cover для img — Вебджем.рф

Содержание

Пропорции для img — dr.Brain

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

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

Содержание

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

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

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

HTML:

<img src="/path/to/image. jpeg" alt="">

CSS:

img {
    object-fit: cover;
}

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

object-fit: cover

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

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

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

HTML:

<div>
    <img src="/media/desk.jpg" alt=""/>
</div>

CSS:

/* 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:

16:9

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

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

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

9 / 16 = 0.5625

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

0.5625 * 100 = 56. 25

Результат: 56.25%

Вот и все.

Заключение

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

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

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

Свойства object-fit и object-position | GoIT HTML+CSS textbook

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

Определяет каким образом содержимое <img> (или <video>) будет вмещаться в контейнер, когда их размеры или пропорции не совпадают. Свойство object-fit обрезает, растягивает или масштабирует контентное изображение. Это похоже на background-size, но для контентных изображений.

object-fit: fill | contain | cover | scale-down | none

fill — изображение масштабируется без сохранения пропорций, чтобы полностью заполнить контейнер. Значение по умолчанию.
contain — изображение масштабируется с сохранением пропорций, чтобы максимально заполнить контейнер.

cover — изображение масштабируется с сохранением пропорций, чтобы полностью заполнить контейнер.
scale-down — будет выбрано значение none или contain, чтобы изображение было наименьшего размера.
none — сохраняются исходные размеры изображения, заданная высота и ширина не имеют эффекта.

Для того, чтобы эта техника работала необходимы два обязательных шага.

<div>
<img src="" alt="" />
</div>

Первый — у контейнера (тумбы) должна быть явно указана фиксированная высота. Ширина может быть по ширине родителя, как в примере.

.thumb {
height: 400px;
width: 300px;
}

Второй — изображение необходимо «вместить» в контейнер, задав высоту и ширину 100%.

 .thumb > img {
display: block;
height: 100%;
width: 100%;
}

После этого к изображению можно применять свойство object-fit.

.thumb > img {
display: block;
height: 100%;
width: 100%;object-fit: cover;
}

Полезно

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

Дополняет свойство object-fit позволяя задать положение изображения в контейнере по осям X и Y. Это похоже на background-position, но для контентных изображений.

object-position: position | initial | inherit

Значением свойства могут быть зарезервированные слова, абсолютные или относительные единиицы измерения.

По умолчанию значение 50% 50%, то есть вертикально и горизонтально по центру.

Обрезать изображения, встроенные в HTML

Опубликовано 12 февраля 2020 г.

Купить электронную книгу

Получите мою электронную книгу, посвященную разработке современного веб-интерфейса CSS3 и
.

Узнать больше

Свойства object-fit и object-position используются для указания размера и положения внешних медиафайлов, вставленных в HTML, в основном изображений в теге , но также и содержимого тега .0014