There are many choices for sizing and positioning background images with the CSS background-size and background-position properties. The object-fit and object-position properties enable us to do related issues with embedded photographs (in addition to different changed components like movies). On this article, we’ll dig into use object-fit to suit photographs into a certain quantity of area, and use object-position to get the positioning inside that area good.

Desk of Contents
  1. What object-fit Is For
  2. How object-fit Works
  3. Fitting an Image into a Container with object-fit
  4. Using object-fit without a Container
  5. Using object-fit in Responsive Layouts
  6. Setting the Position of Images with object-position
  7. Conclusion

What object-fit Is For

Typically a picture is just too massive for the area we would like it to suit into. Previously, we might both need to crop the picture in a picture editor, or resize the picture by setting width and/or peak constraints (an imperfect choice), or carry out some type of sophisticated clipping, or maybe resort to utilizing a background picture as an alternative (which is a pity if the picture isn’t only for ornament).

The object-fit property does for photographs what background-size does for background photographs: it offers choices for a way a picture is displayed inside a chosen space, hiding a few of it if essential. This designated space may need a set width and peak, or it might be a extra responsive area equivalent to a grid space that grows, shrinks and flexes relying on the scale of the browser’s viewport.

How object-fit Works

Each HTML factor has its personal β€œcontent material field”, which represents the area it occupies. By default, the content material field of a picture matches the picture’s pure dimensions.

Once we apply a distinct width and/or peak to a picture, we’re actually altering the scale of the content material field. If the scale of the content material field change, the picture will nonetheless fill the content material field. So if now we have a 300px by 300px picture and set its dimensions to 300px by 200px, the picture will seem distorted.

The object-fit property offers us choices for a way the picture is displayed inside that resized content material field. As a substitute of it showing distorted, we are able to conceal a part of the picture, or pressure the picture to solely partially fill its content material field in order that it’s totally seen and never distorted.

Setting Up

As an instance intimately how the object-fit property works, we’ll place a picture inside a div that’s centered using Grid layout. The div has a brown background, and a dotted border supplied by the ::earlier than pseudo-element that can assist us perceive what’s taking place with the picture.

See the Pen
object-fit: setup
by Pylogix (@Pylogix)
on CodePen.

For our picture demos, we’ll use the next picture (of Oia on Santorini, Greece). Its pure dimensions are 400px by 600px.

Portrait image of a village by the sea

Our picture is far bigger than our div, and if we place the picture contained in the div, it is going to spill out, as proven beneath.

See the Pen
object-fit: setup2
by Pylogix (@Pylogix)
on CodePen.

Our purpose is to stop the picture from bursting out of its container like this, but additionally to have it match comfortably inside it, and object-fit will assist us try this.

If we have been working with a background picture, we might set one thing like background-size: cowl and the background picture can be constrained to the area of the container. However as we’ve seen, for object-fit to do something helpful, we first have to outline a peak and width on the picture’s content material field that’s totally different from its pure measurement. Within the examples beneath, we’ll constrain the width and peak of the picture to 100%, in order that its content material field matches the scale of the container div:

img {
  width: 100%;
  peak: 100%;
}

Right here’s what that appears like.

See the Pen
object-fit: setup3
by Pylogix (@Pylogix)
on CodePen.

The picture and its content material field now match snugly inside the container, however the picture is badly distorted. That is the place the magic of object-fit involves our rescue, so let’s see what it has to supply.

Becoming an Picture right into a Container with object-fit

The object-fit property provides 5 important key phrase values for figuring out how our picture shall be displayed inside its container. Two of these key phrases β€” cowl and comprise β€” carry out the identical function as their background-size cousins.

object-fit: cowl

The cowl worth forces the picture to fully cowl the world of the container, displaying as a lot of the picture as doable with out distorting it:

img {
  width: 100%;
  peak: 100%;
  object-fit: cowl;
}

See the Pen
object-fit: cover
by Pylogix (@Pylogix)
on CodePen.

As a result of the picture is kind of tall, we see its full width however not its full peak, as illustrated within the picture beneath.

The cover value ensures that the narrower part of the image fully fills the container

The cowl worth might be probably the most helpful of these on supply, being the go-to choice in most circumstances.

It’s value noting right here the positioning of the picture. Not like background-position, which defaults to 0 0 (positioning the background picture from the highest left of the container), the default object-position is 50% 50%, which facilities the picture in its content material field. Once we have a look at the object-position property later, we’ll learn to specify which a part of the picture is seen.

object-fit: comprise

The comprise worth forces the picture to suit completely inside its content material field however with out distortion. The picture retains its pure side ratio, and due to this fact doesn’t fill its container:

img {
  width: 100%;
  peak: 100%;
  object-fit: comprise;
}

See the Pen
object-fit: contain
by Pylogix (@Pylogix)
on CodePen.

It’d appear to be we might get the identical outcome above by simply setting peak: 100% on the picture and nothing else. However not fairly, as that would depart the picture positioned to the left moderately than within the middle, which is the default with object-fit. Together with object-position, object-fit offers extra choices for a way the picture is positioned inside the container.

object-fit: none

The none property permits the picture to take care of its pure, authentic dimensions. Solely as a lot of it as can match within the resized content material field is seen.

See the Pen
object-fit: none
by Pylogix (@Pylogix)
on CodePen.

Not like with object-fit: cowl, our picture isn’t compelled to be fully seen alongside not less than one axis. The unique picture is wider and taller than the content material field, so it spills out in each instructions, as illustrated beneath.

The none value keeps the image at its normal size, so that the top, bottom and sides of the image are not seen in the container

Notice, once more, that the middle of the picture aligns with the middle of the content material field by default.

Additionally observe that object-fit: none doesn’t imply object-fit is doing β€œnothing”. As we are able to see, it’s doing quite a bit in contrast with no object-fit setting in any respect. (See what occurs within the Pen above if you happen to take away object-fit: none as a reminder.)

object-fit: scale-down

The scale-down property both does the identical as none or comprise. It chooses whichever will outcome within the picture showing smaller.

See the Pen
object-fit: scale-down
by Pylogix (@Pylogix)
on CodePen.

Clearly, in our present instance, comprise is what it is going to select, as a result of our container is smaller than the picture. If our container have been bigger than the picture, none would prevail, and the picture would keep at its pure measurement moderately than fill the container in a single course, as you can see in this CodePen demo.

object-fit: fill

If we alter the object-fit worth to fill in our demo, it’s as if object-fit isn’t set in any respect. That’s as a result of, by default, the picture fills its content material field it doesn’t matter what dimensions are set.

See the Pen
object-fit: fill
by Pylogix (@Pylogix)
on CodePen.

As a result of the fill property is more likely to distort a picture, it’s in all probability not the perfect one to show to most often.

Utilizing object-fit and not using a Container

Within the examples above, we’ve been utilizing object-fit to measurement a picture inside a div container, however the rules we’ve seen in follow work simply as nicely with out that container. What’s necessary is the scale of the picture’s content material field and the way the picture is displayed inside that field.

For instance, we might apply the next CSS to the picture, with none surrounding div:

img {
  width: 300px;
  peak: 300px;
  object-fit: comprise;
}

The result’s proven within the CodePen demo beneath.

See the Pen
object-fit: no container
by Pylogix (@Pylogix)
on CodePen.

Attempt altering the values on the object-fit property within the Pen above to cowl, fill, scale-down and none to see how every behaves. The outcomes are the identical as if the picture have been set to width and peak of 100% and contained inside a div set to 300px by 300px.

Utilizing object-fit in Responsive Layouts

The object-fit property might be most helpful in conditions the place the scale of the picture’s designated space reply to the scale of the browser viewport. The next demo assigns our picture to a particular, versatile grid space:

img {
  width: 100%;
  peak: 100%;
  object-fit: cowl;
  grid-row: 2 / 3; 
  grid-column: 2 / 3;
}

article {
  show: grid; 
  grid-template: 5% 1fr 10% / 40% 1fr 40%; 
  peak: 100vh;
}

See the Pen
object-fit in a responsive area
by Pylogix (@Pylogix)
on CodePen.

Because the viewport and grid areas develop and contract, the cowl worth ensures that the picture at all times matches properly into its grid space, altering how a lot of the picture is seen in order that it’s by no means distorted. (Try the demo in full page view to get the perfect sense of this.)

To be taught extra about grid areas, take a look at our beginner’s guide to CSS Grid.

Setting the Place of Photos with object-position

Simply as background-position is used to set the positioning of a background image inside its container, the object-position property is used to manage the positioning of a picture factor inside its personal content material field.

As we’ve seen, object-position defaults to 50% 50%, which signifies that the middle of the picture aligns with the middle of its content material field. We will change that with a spread of key phrase values (high, backside, left, proper, middle), or through the use of size values (equivalent to px, em, or %), or through the use of combos of each.

Let’s say we now need to place our picture from the underside proper. We might use the key phrases proper backside, or share values 100% 100%:

img {
  width: 100%;
  peak: 100%;
  object-fit: cowl;
  object-position: proper backside; 
}

See the Pen
object-position 1: keywords
by Pylogix (@Pylogix)
on CodePen.

The picture beneath illustrates the positioning of our picture now.

Our image now is positioned from the bottom right, so that the top part of the image is hidden

You possibly can mess around with the positioning key phrases within the Pen above to see how they work, together with the object-fit key phrases, however the outcomes needs to be straightforward to foretell.

We will additionally offset the picture from its container with items equivalent to pixels or ems. For instance:

img {
  width: 100%;
  peak: 100%;
  object-fit: cowl;
  object-position: 20px 2em; 
}

See the Pen
object-position 2: units
by Pylogix (@Pylogix)
on CodePen.

We might do an identical offset from the underside proper by combining items and key phrases, like so:

img {
  width: 100%;
  peak: 100%;
  object-fit: cowl;
  object-position: proper 20px backside 2em; 
}

See the Pen
object-position 3: units and keywords
by Pylogix (@Pylogix)
on CodePen.

We’ve seen already that we are able to place our picture in its content material field with percentages. As with the background-position property, utilizing percentages with object-position can get a bit complicated. An object-position of 50% 50% signifies that the middle of the picture aligns with the middle of its content material field on each horizontal and vertical axes.

If we set the object-position to 20% 40%, it signifies that a vertical line 20% from the left of the picture coincides with a vertical line 20% from the left of the content material field, and a horizontal line 40% from the highest of the picture coincides a horizontal line 40% from the highest of the content material field, as illustrated beneath.

Vertical and horizontal lines at 20% and 40% of the image and container in alignment

We will see this in follow within the CodePen demo beneath.

See the Pen
object-position 4: percentages
by Pylogix (@Pylogix)
on CodePen.

Conclusion

The object-fit property is designed to work with any type of replaced elements, equivalent to photographs, movies, iframes and embeds. Fairly how helpful it’s to suit components like movies into an outlined space (the place a few of the factor is perhaps hidden) is maybe a matter for debate, however little doubt there are viable use circumstances. A greater choice is perhaps to set the width of an iframe to width: 100% of the accessible area after which use the aspect-ratio property to protect its proportions.

It’s extra frequent to have a certain quantity of area during which a picture wants to suit, so object-fit could be very helpful for permitting the picture to suit into that area with out being distorted (even when a few of it needs to be hidden).

To be taught extra about object-fit and object-position, take a look at the MDN pages for these properties:

Lastly, as famous above, it’s value evaluating the object-fit and object-position properties with the background-size and background-position properties, which have quite a lot of similarities. Try How to Use CSS background-size and background-position to stand up to hurry with them.