-o-object-fit в CSS

-o-object-fit

Internet Explorer Chrome Opera Safari Firefox Android iOS
11.0+

Краткая информация

Значение по умолчанию fill
Наследуется Нет
Применяется К , , ,
Процентная запись Неприменима

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

-o-object-fit: fill | contain | cover | none

Значения

Влияние разных значений на фотографии продемонстрировано на рис. 1. Был использован следующий стиль.

Рис. 1. Фотографии с разным значением -o-fit-object

HTML5 CSS 2.1 CSS 3 IE 9 Cr 15 Op 11 Sa 5 Fx 8

свойство object-fitCSS3-генератор ☛

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

Краткая информация

Значение по умолчанию fill
Наследуется Нет
Применяется К , , ,
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Влияние разных значений на фотографии продемонстрировано на рис. 1. Был использован следующий стиль.

Рис. 1. Фотографии с разным значением object-fit

Пример

Объектная модель

Примечание

Opera до версии 19 поддерживает свойство -o-object-fit .

Спецификация ?

Спецификация Статус
CSS Image Values and Replaced Content Module Level 4 Рабочий проект
CSS Image Values and Replaced Content Module Level 3 Возможная рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Edge Chrome Opera Safari Firefox
31 10.60 19 7.1 36
Android Firefox Mobile Opera Mobile Safari Mobile
4.4.4 36 11.5 24 8

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

СSS3 Свойство object-fit

Пример

Отрезать стороны изображения, сохраняя соотношение сторон, и заполнить пространство:

Определение и использование

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

Это свойство указывает содержимому, заполнить контейнер различными способами; например, «сохранить соотношение сторон» или «растянуть и занять как можно больше места».

Значение по умолчанию: см. раздел отдельные свойства
Унаследованный: нет
Анимируемый: нет Прочитайте о animatable
Версия: CSS3
JavaScript синтаксис: object.style.objectFit=»cover» Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

CSS The object-fit Property

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

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
object-fit 31.0 16.0 36.0 7.1 19.0

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, which is 400×300 pixels:

However, if we style the image above to be 200×400 pixels, it will look like this:

Example

We see that the image is being squeezed to fit the container of 200×400 pixels, and its original aspect ratio is destroyed.

If we use object-fit: cover; it will cut off the sides of the image, preserving the aspect ratio, and also filling in the space, like this:

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

All Values of The CSS object-fit Property

The object-fit property can have the following values:

  • fill — This is default. The replaced content is sized to fill the element’s content box. If necessary, the object will be stretched or squished to fit
  • contain — The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box
  • cover — The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. The object will be clipped to fit
  • none — The replaced content is not resized
  • scale-down — The content is sized as if none or contain were specified (would result in a smaller concrete object size)

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

object-fit

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

What Is A Replaced Element?

A replaced element is an element whose dimensions and content are defined outside the scope of CSS. Replaced elements often have intrinsic dimensions—the width and height as defined by the element itself, not imposed by the surroundings or defined in CSS. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units, and from which the intrinsic ratio can be determined.

Dudley Storey puts it nicely when he says that ‘another way of thinking of replaced elements is “any tag that has its content replaced by an outside source”. and are obvious examples’.

Other examples of replaced elements are embedded documents,

Sizing Replaced Elements Using object-fit

Sometimes, you may want or need to have all images (or videos, or inputs, etc.) on a page have the same height and width values. An example of this is avatar images in user profiles or testimonials.

The images you end up using on the page may not have the same dimensions, let alone the same aspect ratio. This is particularly common in applications where the user gets to upload and use their own images that need to be made to fit into specific spots with predefined dimesions.

Using the object-fit property, you can fit the contents of an image into the dimensions you specify in your style sheet.

The contents can be set to scale up or down, shrink or stretch as necessary to fit into the width and height you specify, using the different values of the property.

See the Values section below for a list of values and a visual illustration of the different values’ effects.

Trivia & Notes

The way the object-fit property sizes the contents of an element is very similar to the way the preserveAspectRatio attribute sizes elements in SVG using the parameter. You can read more about how preserveAspectRatio works in SVG in this article.

After the contents of the image have been sized with object-fit , you can position them inside the image using the object-position property. The object-position property works similar to the way the parameter of the preserveAspectRatio works in SVG. Refer to the object-position property’s entry for more information.

Official Syntax

  • Syntax:
  • Initial: fill
  • Applies To: replaced elements
  • Animatable: no
  • Values

    According to the specification: The concrete object size is the result of combining an object’s intrinsic dimensions and specified size with the default object size of the context it’s used in, producing a rectangle with a definite width and height.

    The following image shows the different object-fit values as applied to an image whose aspect ratio is different from the aspect ratio of the element that is referencing it (the tag):

    object-fit property in action.» w /> Image showing the different values of the object-fit property in action.

    Notes

    If the content does not completely fill the replaced element’s content box, the unfilled space shows the replaced element’s background—i.e. the element’s container.

    Also, Since replaced elements always clip their contents to the content box, the content will never overflow.

    Examples

    The following example sets the dimensions of an element, and then uses the object-fit property to fit the contents of that image (the referenced image in the src attribute) to these dimensions:

    Live Demo

    Browser Support

    CSS3 object-fit/object-position

    Method of specifying how an object (image or video) should fit inside its box. object-fit options include «contain» (fit according to aspect ratio), «fill» (stretches object to fill) and «cover» (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

    -o-object-fit

    Свойство -o-object-fit определяет, как контент элемента масштабируется относительно заданных размеров элемента или родительского элемента с заданными размерами.

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

    Допустимые значения

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

    Наглядное объяснение значений contain и cover можно посмотреть на странице CSS свойства background-size

    “Object-fit” and “Object-position” — Super CSS

    The object-fit CSS property is used to specify how an or should be resized to fit its container and the object-position css property is used together with object-fit to specify how an or should be positioned with x/y coordinates inside its “own content box”. Together they provide us with the power to manipulate an image or a video and create some magic.

    Object-fit

    This property defines how an image or a video fits inside its content box.

    The object-fit property can have the following values:

    • fill(default) – The replaced content is sized to fill the element’s content box. If necessary, the object will be stretched or squished to fit
    • contain – The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box
    • cover – The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. The object will be clipped to fit
    • none – The replaced content is not resized
    • scale-down – The content is sized as if none or contain were specified (would result in a smaller concrete object size)

    Object-position

    The object-position property is used together with object-fit to specify how an or should be positioned with x/y coordinates inside its “own content box”.

    The object-position property is used together with object-fit property to move the image around the content box. The default value it takes is object-position: 50% 50% . This is the reason when we apply object-fit: cover the image is positioned in center by default. The x/y coordinates can take a ‘px’ value or a ‘percentage’ value.

    The above code resizes an image to fit its content box, and position the image 5px from the left and 10% from the top inside the content box.

    Apart from providing x/y coordinates values, object-position supports values like ‘bottom’, ‘center’, ‘top’, ‘left’ and ‘right’ which are self-explanatory.

    object-fit and object-position is supported by all latest version of browser except IE.

    One more step

    Please complete the security check to access codepen.io

    Why do I have to complete a CAPTCHA?

    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

    What can I do to prevent this in the future?

    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

    Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

    Cloudflare Ray ID: 53406a757dc38df3 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    -o-object-fit в CSS

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

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

    Решением для этого является использование свойства Object Fit. Это свойство сохраняет нас в такой ситуации, потому что позволяет нам определить, как будет вести себя поведение элемента.

    Значения для этого свойства:

    Object-fit: fill: содержимое заполняет весь элемент. В соответствии с его размерами. Это приводит к искажению изображения и потере изображения.

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

    Object-fit: cover: один из лучших вариантов, очень похожий на свойство фона. Содержимое заполняется всем элементом, и изображение не теряет своего внешнего вида, однако обрезка изображения создается, поскольку показана только его часть. В случае миниатюр галереи эта опция будет подходящей, так как щелчок откроет модальный, и если изображение будет показано полностью.

    Object-fit: scale-down: контент ведет себя так, как если бы не были указаны ни один или контейнер, что бы отображало меньший размер.

    Object-fit: none: содержимое не изменяется.

    И не беспокойтесь о совместимости, это свойство имеет хорошую поддержку в большинстве браузеров, кто его не поддерживает, — Internet Explorer.

    -o-object-fit в CSS

    PostCSS Object Fit Images

    PostCSS plugin that updates the standard object-fit tag to work with the object-fit-images polyfill for browsers that do not natively support object-fit..

    Existing font and font-family

    Existing font and font-family declarations are kept and object-fit-images will still work:

    See PostCSS docs for examples for your environment.

    • © 2020 GitHub , Inc.
    • Terms
    • Privacy
    • Security
    • Status
    • Help

    You can’t perform that action at this time.

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

    Илон Маск рекомендует:  Данные, их представление и формы пользовательского интерфейса
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL