Videos and images have the potential to pose problems when laying out a website.
Let’s say you have specified the width of an image explicitly in your CSS. If the width is specified in percentages or viewport units and the image’s height is set to
auto, resizing the browser window will keep the aspect ratio of the image.
However, sometimes you may have limited space available and need to put a constraint on an image’s height. Resizing the browser window now will definitely mess up its aspect ratio.
These properties are similar to the more familiar
background-position properties. So, even if you have never heard about them before, you won’t have much trouble in understanding how they work.
Both properties work on replaced elements. However, for the sake of brevity, in this article I will use the term image(s) instead of replaced element(s).
You might be wondering why use these two properties at all when you can use
background-position. Actually, there are at least two good reasons.
First, consider a scenario where you have an image that is supposed to be part of an article. If the image dimensions are set in CSS just like the case described in the introduction, resizing the browser window will mess up its aspect ratio. In such a case, you will be tempted to use a
background-position properties because simply using an
img tag won’t be sufficient.
The problem with this solution is that you should always try to keep your content and presentation separate. The background properties are meant to be used for presentation purpose. When your images are actually part of the content, it makes more sense to use
object-position along with the
img tag to achieve the same result.
The other reason is that the background properties cannot be applied to videos whereas
object-position can. Therefore, when displaying videos,
object-position are your only options.
This property determines how replaced content like images and videos occupy the space inside their content box. It has five possible values:
The syntax to use this property is shown below:
When set to
fill, the image is sized to fit completely inside the content box. The height of image in this case is equal to the height of the box itself. This is also the initial value of the
contain resizes the image in such a way that the image fits within its content box while still retaining its aspect ratio. This serves two purposes. It avoids image distortion and at the same time keeps the image inside the content box. If the image does not completely cover the content box, the background color that you might have set fills up the remaining space.
contain value can be useful in situations where you don’t know the dimensions of the image but still want it to fit inside a container of known width.
If you want the image to fill the space inside its content box entirely and still keep its intrinsic aspect ratio, you should use the
cover property. In this case, the image is scaled in such a way that the smaller side of the image fits the containing box perfectly. Any part of the image that overflows the box is then cropped.
Continue reading %Using CSS’s object-fit and object-position Properties%