CSS object-fit and object-position properties: Crop images embedded in HTML

Martin Michálek
Feb 14 · 3 min read

The properties object-fit and object-position are used to specify the size and position of external media inserted into HTML, mainly the images within the <img> tag, but also the content of the <video>, <iframe>, or <embed> elements.

The properties are not supported by Internet Explorer, therefore they are more useful for projects where it’s not that important.

object-fit and object-position can be viewed as parallel to the image properties background-size and background-position. Only that these are intended for elements inserted directly into HTML.

Figure: The object-fit and object-position properties determine how the inserted media behaves when its dedicated space becomes smaller or larger.

Let’s show it on a simple example.

We have the following HTML:

<img class="img img--cut" src="image-300x300.jpg"
width="300" height="200" alt="Image…">

CSS:

.img--cut {
object-fit: cover;
object-position: bottom;
}

And let’s explain:

  • The image has natural dimensions of 300x300 pixels, but it is only allowed to occupy the height of 200 pixels in HTML, see the height property.
  • object-fit:cover indicates that the image should be stretched over the entire area of the <img> element so that there is no space left. See object-fit.
  • object-position:bottom specifies the alignment to the bottom edge of the <img> element surface. See object-position.

Object-fit values

Specifies how to fit the external media to an area specified by the width and height properties in HTML or CSS.

Figure: Object-fit property values applied to an image of 150 × 150 pixels.

This is very similar to embedding images to background using the background-size property.

Figure: In practice, the most useful value is object-fit:cover.

Object-position values

Defines where will be the element positioned by using object-fit. It has exactly the same values as the background-position property.

Figure: Examples of object-position property values.

Let’s look at examples of values.

Use in practice

Support in browsers

Since the Edge explorer has been upgraded to the Chromium rendering engine, only Internet Explorer 11 does not support these properties.

By the time I am writing this article, Internet Explorer still has a significant share of users in some countries (like for example here, in the Czech Republic), so it will be necessary to sort out the fallback.

caniuse.com/object-fit

How to solve the problem in Internet Explorer:

  1. Instead of object-fit/object-position embed the image to the background by using background-size/background-position. Alternatively, you can play with the transform property and with absolute positioning (See StackOverflow).
  2. For IE11 use polyfill — fregante/object-fit-images. I do not recommend it much, because it slows down the rendering performance in the already slow Explorer.
  3. Detect a non-supporting browser (eg. using the Modernizr library) and deploy a workaround. For example, StackOverflow offers a solution to change <img> to <svg> and resolve the problem in it.

Originally published at https://www.cssmine.com.

CSS Mine

Dig into CSS3 and web UI development. http://cssmine.com/

Martin Michálek

Written by

Freelance front-end designer based in Prague, the Czech Republic. I write about CSS and modern web user interfaces. Buy my ebook: http://cssmine.com/ebook

CSS Mine

CSS Mine

Dig into CSS3 and web UI development. http://cssmine.com/

More From Medium

Related reads

2.8K

Related reads

122

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade