Styling
Place Images with object-position
object-position controls the placement of img and video media inside containing boxes. It's a partner property to object-fit. Using the two properties together gives full control over image scaling, placement, and cropping.
Instructor: [00:00] Object-position is a CSS property that affects which parts of a cropped image are seen. Here are two different images with two aspect ratios. One of them is 2 x 3, 200px x 300px, and the other is 3 x 2, the inverse.
[00:16] Let's start by making both of them square using this prepared class "square-image". This class sets the height and width to a fixed 200 pixels and uses the object-fit property with the value of cover to crop the images instead of squishing down to fit the available space. We can see how bad and squished they look without the rule.
[00:44] By default, object-fit: cover gives you a center center crop where the top and bottom are cropped off of this first image and the left and right are cropped off of this second image. Use the object-position property to place the image in the available space. I'll do this inline so we can control it independently for each image.
[01:09] Object-position takes x-axis and y-axis values in that order. We can show the top of this vertical image by changing the value to center top. Conversely, we can shift it down using center bottom.
[01:23] For the horizontal image, we do the same thing, but we're going to change the first value, which is the x-axis value, to be left to get the left side of the image or right to get the right side of the image. To get even tighter control, we can use a percentage. These values can be negative values as well.
[01:42] Here you'll see that it's impossible to move an image too far and not hit the edge of your container. Let's change this back to a positive number. When you know the exact image size, you can use pixels as well, which also support negative values. This is true for any supported fixed measurement value.
When we use object-fit: [02:03] Cover, these images are going to fit the available space. Even though I'm specifying bottom here, it doesn't matter because the height of this image is being set to match the size of the box. If we change this to object-fit: none, which does no scaling, make the box smaller than the image, we can have control over both axes. The same is true for our vertical image.
[02:29] That's it. That's object-position.