object-fit в CSS

свойство 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

Браузеры

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

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

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

CSS свойство object-fit

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

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

При помощи значений свойства можно увеличить, уменьшить, обрезать или растянуть контент таким образом, чтобы он соответствовал указанным размерам ширины и высоты. Свойство имеет пять значений:

  • fill
  • contain
  • cover
  • none
  • scale-down
Значение по умолчанию fill
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.objectFit = «cover»;

Синтаксис

Пример

Пример со значением «cover», где края изображения обрезаны, а пропорции сохранены:

Пример

Пример со значением «contain»:

Пример

Пример со значением «scale-down», где размер изображения уменьшен:

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

Пример

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

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

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

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

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

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

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

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.

    Свойство object-fit: cover; для IE и Edge

    Есть ли какая-то возможность заставить свойство object-fit: cover; работать с IE и Edge? Знаю что есть штука с названием Polyfill, не знаю что с ней делать. Помогите пожалуйста решить проблему с object-fit: cover; для IE и Edge.

    1 ответ 1

    Предлагаю сделать следующий хак: поставить изображение фоном к блоку и применить к нему свойство background-size: cover , которое работает и в IE и Edge. Этот вариант будет на чистом CSS и будет работать гораздо быстрее полифилов на JS.

    Однако если действительно нужно использовать img , вы можете применить полифил для IE:

    Object-fit в CSS

    �� Polyfill object-fit/object-position on : IE9, IE10, IE11, Edge, Safari, .

    • Fast and lightweight (demo)
    • No additional elements are created
    • Setup is done via CSS
    • Scaling is taken care by the browser (it uses background-size )
    • srcset support
    • src and srcset properties and attributes keep working: img.src = ‘other-image.jpg’
    Comparison fregante
    /object-fit-images ��
    constancecchen
    /object-fit-polyfill
    tonipinel
    /object-fit-polyfill
    Browsers IEdge 9-14, Android img image video picture img
    cover/contain �� �� ��
    fill �� �� ��
    none �� �� ��
    scale-down �� using �� ��
    object-position �� �� ��
    srcset support �� Native or picturefill notes �� ��
    Extra elements �� No �� Yes �� Yes
    Settings �� via CSS �� via HTML �� via HTML

    You will need 3 things

    one or more elements with src or srcset

    CSS defining object-fit and a special font-family property to allow IE to read the correct value

    or, if you also need object-position

    To generate the font-family automatically, you can use the PostCSS plugin or the SCSS/SASS/Less mixins.

    If you set the font-family via JavaScript (which must be followed by calling objectFitImages() ), make sure to include the quotes in the property.

    “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: 534069f18b4f8e5f • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    CSS | The object-fit Property

    It is a CSS property to specify how an image or video should be resized to fit its content box.

    Property values:

      fill: It is a default value. The replaced image is stretched to fit the content box. The replaced image will completely fill the box heedless of its aspect ratio.

    Syntax:

    Example:

    Output:

    contain:The replaced image preserves the aspect ratio of the original image while fitting within the content box.

    Syntax:

    Example:

    Output:

    cover:This value also preserves the aspect ratio of the original image is the replaced image while fitting in the content box. Sometimes it is clipped to fit when the aspect ratio of the original image doesn’t match with the aspect ratio of the content box.

    Галерея изображений с помощью свойства CSS object-fit: уменьшенное и полное изображения в одном файле

    8 мая 2020 | Опубликовано в css | 2 Комментариев »

    Большей части галерей изображений на сайтах нужно подгружать как минимум два варианта каждого изображения: уменьшенное изображение и его полноразмерную версию. У этого подхода есть свои преимущества, но и немало раздражающих недостатков. Свойство object-fit может использоваться для улучшения галерей изображений. Единственный недостаток этого способа — уменьшенные изображения будут выглядеть сжатыми в браузерах, которые не поддерживают это свойство, например, в старых версиях браузеров и браузере Internet Explorer.

    Разметка

    Основная разметка состоит из блока, в который вложено несколько элементов фигур:

    Код CSS

    Для расстановки изображений используется метод flexbox:

    Все изображения равной ширины:

    object-position

    Изображения со свойством object-fit: cover будут сфокусированы на своем центре, изменение их расположения основывается на тех же принципах, что и размещение фоновых изображений. Чтобы изображение начиналось в нижнем левом углу? воспользуемся свойством object-position со следующими значениями:

    При наведении указателя мыши на любой элемент фигуры, он увеличивается в ширину в два раза по сравнению с соседними элементами, изображение внутри расширяется до максимальных значений ширины и высоты, свойство object-fit не применяется:

    Обратите внимание, свойство object-position пока не поддерживается браузером Safari.

    Заключение

    Подписи изображений немного сдвинуты для создания адаптивности.

    Посмотрите на результат и полный код ниже:

    Использованы фотографии Feng Yi, лицензированные по лицензии Creative Commons.

    Илон Маск рекомендует:  Что такое код md5_file
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL