Css object fit center

Знакомство с object-fit

При работе с веб-документами мы довольно часто сталкиваемся с задачей отображения изображений (или видео) разного размера в одном и том же месте. Предположим, что вы пишете приложение с динамической галереей, которая позволяет пользователю загружать свои файлы. Вы не можете гарантировать, что все будут загружать изображения с одинаковым соотношением сторон. Что же делать?

Если разрешить соотношению сторон заполнять все пространство элемента-контейнера, то в большинстве случае это будет выглядеть ужасно. А кадрировать и менять размеры динамически «на лету» может оказаться не в ваших силах. (Допустим, если вы работаете с CMS и имеете права только для редактирования содержимого страницы.)

Модуль «Изображения и замещаемое содержимое в CSS» позволяет нам использовать свойства object-fit, предназначенное для решения подобных проблем, и object-position, устанавливающее положение контента внутри элемента по горизонтали и вертикали.

Эти элементы неплохо поддерживаются современными браузерами (за исключением IE). В этой статье мы рассмотрим несколько примеров их использования.

Примечание: object — fit работает и с SVG-контентом, но того же эффекта можно достигнуть, если установить атрибут preserveAspectRatio =»» в самом SVG.

Как работают object-fit и object-position?

Вы без проблем можете применять object — fit к любому замещаемому элементу, например:

object — fit может иметь одно из 5 значений:

1. contain : Размер контента (например, изображения) будет изменен, чтобы отобразить его целиком с сохранением первоначального соотношения сторон, но при этом уместиться в размеры, заданные элементом.

2. fill : Размер контента будет увеличен, чтобы заполнить размеры, заданные элементом, даже если при этом будет нарушено первоначальное соотношение сторон.

3. cover : Сохранение соотношения сторон контента, но изменение его ширины и высоты. Таким образом, контент полностью покрывает элемент. Меньшая из двух сторон изменяется до размеров контейнера, а большая – выходит за рамки элемента и обрезается.

4. none : Полностью игнорирует высоту или ширину, заданные контейнером, и просто использует оригинальный размер контента замещаемого элемента.

5. scale — down : Размер контента задается либо как при указании none, либо как при contain , смотря что из этого даст меньший размер замещаемого элемента в итоге.

object — position действует так же, как background-position при работе с фоновыми изображениями. Например:

Значения, выраженные в процентах, тоже можно использовать, но они рассчитываются относительно избытка доступного пространства – разницы между шириной элемента и итоговой отрисованной шириной замещаемого контента. Поэтому object — position : 50% 50% (значение, используемое по умолчанию) всегда будет помещать замещаемый элемент точно в центре. Кроме того, object — position : 0% 0% всегда будет означать выравнивание по левому верхнему углу, object — position : 100% 100% *всегда* означает выравнивание по нижнему правому углу, и т.д.

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

Результат использования различных значений object-fit

Следующие примеры кода демонстрируют эффекты от использования различных значений object — fit .

Использование object-fit: contain для размещения изображений с полями (леттербоксинг):

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

Изображения с измененными пропорциями обычно ужасно выглядят, поэтому вместо этого вы можете добавить к изображению поля, с помощью параметра object — fit : contain (пример использования object-fit: contain):

Кадрирование изображений с помощью object-fit:cover

Еще одним решением, позволяющим сохранить соотношение сторон, будет кадрирование каждого изображения до нужного размера, чтобы оно полностью покрывало элемент < img >, при этом любые выступы будут скрыты. Для этого просто воспользуйтесь object — fit : cover (пример использования object-fit: cover):

Изменение соотношения сторон видео с помощью object-fit: fill

С другой стороны, мы также можем взять видео и насильно изменить его соотношение сторон. Возможно, в некоторых видео, присланных вашим редактором контента, задано неправильное соотношение сторон, и вы хотите исправить его на лету, одним движением руки?

Если мы вставим его на страницу, используя этот код:

То выглядеть он будет ужасно: у видео появятся поля, потому что элемент < video >всегда старается сохранить оригинальное соотношение сторон исходного файла. Чтобы исправить это, мы можем использовать object — fit : fill (пример использования object-fit: fill):

Это изменит оригинальное соотношение сторон и заставит кадр полностью заполнить элемент < video >, чтобы он отображался корректно.

Интересные эффекты с использованием transition

Комбинирование object — fit и object — position с CSS transition может добавить галерее изображений или видео несколько довольно интересных эффектов. Например:

Сначала отображается лишь небольшая часть изображения, а при выборе/наведении курсора на элемент он увеличивается, демонстрируя изображение целиком (пример использования object-fit: none).

Это происходит благодаря установке свойства object — fit : none у элемента < img >. Мы заставляем контент полностью игнорировать заданные ранее ширину и высоту и позволяем выйти за пределы элемента. После этого мы используем overflow: hidden, чтобы обрезать всё, что не поместилось. Для плавного увеличения размера элемента < img >при наведении курсора/выборе используется свойство transition .

Пример галереи

Для демонстрации чуть более практичного использования object — fit мы создали пример галереи:

16 изображений загружаются с помощью XHR и вставляются в элементы img как ObjectURL .

for(i = 1; i function retrieveImage(requestObj,imageNo) < var request = new XMLHttpRequest(); request.open('GET', requestObj, true); request.responseType = 'blob'; request.onload = function() < var objectURL = URL.createObjectURL(request.response); thumbs[imageNo].setAttribute('src',objectURL); thumbs[imageNo].onclick = function() < . >> request.send(); >

В свою очередь, каждому изображению присваивается обработчик onclick , чтобы по клику они отображались в полном размере, заполняя экран (главному изображению, изначально имеющему CSS-свойство display: none , присваивается класс blowup , который заставляет его отобразиться и заполнить весь экран; после этого атрибут src главного изображения получает URL того объекта, по превью которого кликнул пользователь).

thumbs[imageNo].onclick = function() < mainImg.setAttribute('src',objectURL); mainImg.className = 'blowup'; for(i = 0; i < thumbs.length; i++) < thumbs[i].className = 'thumb darken'; >>

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

Все размеры устанавливаются в процентах, поэтому сетка сохраняет свои пропорции при любом размере экрана.

Примечание: всем превью был присвоен атрибут tabindex =»0″, что позволяет переключаться между ними клавишей Tab (чтобы добавить элемент в список перехода по клавише Tab, необходимо присвоить ему tabindex =»0″ ), а обработчик onclick , который позволяет отображать полноразмерное изображение, был продублирован обработчиком onfocus , чтобы обеспечить элементарный доступ с клавиатуры.

thumbs[imageNo].onfocus = function() < mainImg.setAttribute('src',objectURL); mainImg.className = 'blowup'; for(i = 0; i < thumbs.length; i++) < thumbs[i].className = 'thumb darken'; >>

Самое интересное же происходит благодаря object — fit :

1. У превью установлено свойство object — fit : cover , таким образом все они будут иметь одинаковый размер и правильное соотношение сторон, а лишнее будет обрезано. Выглядит это неплохо и создает интересный эффект при изменении размеров окна.
2. Основное изображение имеет свойства object — fit : contain и object — position : center , так что оно будет отображаться полностью, с правильным соотношением сторон и с максимально возможным размером.

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Источник

CSS The object-fit Property

The CSS object-fit property is used to specify how an or should be resized to fit its container.

The CSS object-fit Property

The CSS object-fit property is used to specify how an or should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as «preserve that aspect ratio» or «stretch up and take up as much space as possible».

Look at the following image from Paris. This image is 400 pixels wide and 300 pixels high:

However, if we style the image above to be half its width (200 pixels) and same height (300 pixels), it will look like this:

Example

We see that the image is being squished to fit the container of 200×300 pixels (its original aspect ratio is destroyed).

Here is where the object-fit property comes in. The object-fit property can take one of the following values:

• fill — This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
• contain — The image keeps its aspect ratio, but is resized to fit within the given dimension
• cover — The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
• none — The image is not resized
• scale-down — the image is scaled down to the smallest version of none or contain

Using object-fit: cover;

If we use object-fit: cover; the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit:

Example

Using object-fit: contain;

If we use object-fit: contain; the image keeps its aspect ratio, but is resized to fit within the given dimension:

Example

Using object-fit: fill;

If we use object-fit: fill; the image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit:

Example

Using object-fit: none;

If we use object-fit: none; the image is not resized:

Example

Using object-fit: scale-down;

If we use object-fit: scale-down; the image is scaled down to the smallest version of none or contain :

Example

Another Example

Here we have two images and we want them to fill the width of 50% of the browser window and 100% of the height.

In the following example we do NOT use object-fit , so when we resize the browser window, the aspect ratio of the images will be destroyed:

Example

In the next example, we use object-fit: cover; , so when we resize the browser window, the aspect ratio of the images is preserved:

Example

CSS object-fit More Examples

The following example demonstrates all the possible values of the object-fit property in one example:

Example

CSS Object-* Properties

The following table lists the CSS object-* properties:

Property	Description
object-fit	Specifies how an or should be resized to fit its container
object-position	Specifies how an or should be positioned with x/y coordinates inside its «own content box»

Источник