Object fit cover

Use the object fit utilities to modify how the content of a replaced element, such as an or , should be resized to fit its container.How it works Change the value of the object-fit property with our responsive object-fit utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.Classes for the value of object-fit are named using the format .object-fit-{value}. Choose from the following values:containcoverfillscale (for scale-down)noneExamples Add the object-fit-{value} class to the replaced element:Responsive Responsive variations also exist for each object-fit value using the format .object-fit-{breakpoint}-{value}, for the following breakpoint abbreviations: sm, md, lg, xl, and xxl. Classes can be combined for various effects as you need.Video The .object-fit-{value} and responsive .object-fit-{breakpoint}-{value} utilities also work on elements.video src="..." class="object-fit-contain" autoplay>video>video src="..." class="object-fit-cover" autoplay>video>video src="..." class="object-fit-fill" autoplay>video>video src="..." class="object-fit-scale" autoplay>video>video src="..." class="object-fit-none" autoplay>video>CSS Sass utilities API Object fit utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API."object-fit": ( responsive: true, property: object-fit, values: ( contain: contain, cover: cover, fill: fill, scale: scale-down, none: none, )),

Retail with Smartsign Read more " alt="Digital signage screen promotes Smartsign and Vestel." decoding="async" data-src=" data-object-fit="cover" data-srcset=" 150w, 300w, 768w, 1024w, 1400w"> Smartsign expands compatibility even further by supporting Vestel Screens Read more What’s happening at Smartsign " alt="" decoding="async" data-src=" data-object-fit="cover" data-srcset=" 150w, 300w, 768w, 1024w, 1536w, 1920w"> To come Smartsign 11April 15, 2025 Read more " alt="" decoding="async" data-src=" data-object-fit="cover" data-srcset=" 150w, 300w, 768w, 1024w, 1400w"> UNI3 by Geely Campus – A fully integrated digital signage experience Read more " alt="" decoding="async" data-src=" data-object-fit="cover" data-srcset=" 150w, 300w, 768w, 1024w, 1400w"> Updated hardware support – Ensuring the best compatibility Read more " alt="" decoding="async" data-src=" data-object-fit="cover" data-srcset=" 150w, 300w, 768w, 1024w, 1536w, 2048w, 2400w"> Another success story: City Gross revolutionizes retail with Smartsign Read more " alt="Digital signage screen promotes Smartsign and Vestel." decoding="async" data-src=" data-object-fit="cover" data-srcset=" 150w, 300w, 768w, 1024w, 1400w"> Smartsign expands compatibility even further by supporting Vestel Screens Read more

CSS The object-fit PropertyThe CSS object-fit property is used to specify how an or should be resized to fit its container.The CSS object-fit PropertyThe 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:We see that the image is being squished to fit the container of 200x300 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 containUsing 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: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: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:Using object-fit: none; If we use object-fit: none; the image is not resized: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:Exampleimg { width: 200px; height: 300px; object-fit: scale-down;}Try it Yourself »Another ExampleHere 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:In the next example, we use object-fit:

3.2.4 • Public • Published 7 years ago ReadmeCode Beta0 Dependencies131 Dependents44 Versionsobject-fit-images 🗻 Polyfill object-fit/object-position on : IE9, IE10, IE11, Edge, Safari, ...Fast and lightweight (demo)No additional elements are createdSetup is done via CSSScaling is taken care by the browser (it uses background-size)srcset supportsrc and srcset properties and attributes keep working: img.src = 'other-image.jpg'Alternative solutionsComparisonbfred-it/object-fit-images🌟constancecchen/object-fit-polyfilltonipinel/object-fit-polyfillBrowsersIEdge 9-14, Android"All browsers"Tagsimgimage video pictureimgcover/contain💚💚💚fill💚💚💚none💚💚💚scale-down💚 using {watchMQ:true}💚💔object-position💚💚💔srcset support💚 Native or picturefill notes💚💔Extra elements💚 No💔 Yes💔 YesSettings💚 via CSS💔 via HTML💔 via HTMLUsageYou will need 3 thingsone or more elements with src or srcsetimg class='your-favorite-image' src='image.jpg'>CSS defining object-fit and a special font-family property to allow IE to read the correct value.your-favorite-image { object-fit: contain; font-family: 'object-fit: contain;';}or, if you also need object-position.your-favorite-image { object-fit: cover; object-position: bottom; font-family: 'object-fit: cover; object-position: bottom;';}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. the activation call before , or on DOM readyThis will fix all the images on the page and also all the images added later (auto mode).Alternatively, only fix the images you want, once:objectFitImages('img.some-image');var someImages = document.querySelectorAll('img.some-image');objectFitImages(someImages);var oneImage = document.querySelector('img.some-image');objectFitImages(oneImage);var $someImages = $('img.some-image');objectFitImages($someImages);You can call objectFitImages() on the same elements more than once without issues, for example to manually request an update of the object-fit value.Apply on resizeYou don't need to re-apply it on resize, unless:You're using scale-down, oryour media queries change the value of object-fit, like this img { object-fit: cover; }@media (max-width: 500px) { img { object-fit: contain; } }In one of those cases, use the watchMQ option:objectFitImages('img.some-image', {watchMQ: true});InstallPick your favorite:script src="dist/ofi.min.js">/script>npm install --save object-fit-imagesvar objectFitImages = require('object-fit-images');import objectFitImages from 'object-fit-images';APIobjectFitImages(images, options)Both parameters are optional. parameter description images Type: string, element, array, NodeList, null Default: