The CSS offers from the first specifications a series of properties and mechanisms to precisely manage the positioning, the behavior and, more recently, the sizing of the background images. Precisely on the basis of properties such as background-size and background-position, two interesting properties have been introduced in the most recent modules: object-fite object-position. Both apply exclusively to the so-called replaced elements. First of all, therefore, to images and videos inserted through the tags <img>and <video>.
With object-fit we can specify the way in which the content of a replaced element adapts to the box made up of its width and height. With object-position we can instead intervene on the positioning of the object in the context of this box.
Defined in the CSS specifications for some years now, object-fit and object-position now enjoy a fairly extensive cross-browser support.
It is only to be observed that Safari supports object-fit but object-position it is not necessary to declare the two properties with proprietary prefixes.
When and how to use object-fit
Let’s see immediately in which scenario of use this property can find its ideal application.
Anyone with a minimum of practice in web design knows how problematic the management of images can be, especially when the specifications required by the project, the layout of the site or the use of a CMS provide for the adoption of certain dimensions or aspect ratios.
Going into details: if we are forced to use on a page (for example a photo gallery) images that have all the same dimensions and we have a set of graphic files with different aspect ratios, we will first prepare the images one by one, perhaps using cropping to respect the aspect ratio required. This is to avoid crushed or stretched images in the resizing operation. Fortunately, in order not to waste time in this boring step, most modern CMS provides a system with which you intervene server side on the images to adapt them when uploading to specific requests.
In such scenarios, the property object-fit provides us with a further, important tool of flexibility that can only be implemented via CSS. Here’s how it works.
In the examples we have prepared we started ( example 1 ) from a series of four images (found on New Old Stock ). They all have a width of 600px but different heights, and therefore different aspect ratios.
In our project, it is required that they appear on the page with a size of 300x300px.
If we set these dimensions in the CSS or directly in the HTML code without preparing and adapting the images in advance, we obtain an easily predictable result ( example 2 ). The images are more or less deformed because we have lost the original aspect ratio.
Here is a comparison.
For completeness here is the CSS code with which we intervened to resize the four photographs:
<pre class=”brush: php; html-script: true”>
img {
width: 300px;
height: 300px;
}
</pre>
At this point, we can intervene with object-fit. To apply the property only one prerequisite is required: the width and height with which we want the image to be displayed (but also the video, if necessary) must be defined either in the CSS or in the HTML code. The first option is definitely to be preferred. it is also advisable to insert in the rule one overflow: hidden for the benefit of browsers that do not support the property. In this way, the part that leaves the limits of the box set with width and height will be hidden.
The property has one of the following values:
- contain
- fill
- cover
- scale-down
- none
object-fit: contain
In the third example we have applied the value contain:
<pre class=”brush: php; html-script: true”>
img {
width: 300px;
height: 300px;
object-fit: contain;
overflow: hidden;
}
</pre>
Here is the result:
The image has been resized to fit the dimensions of its box (the part with the edge), maintaining its original aspect ratio. Spaces are also created at the top and bottom, a bit ‘as happens with the so-called letterbox on video, what makes the black bands appear above and below the movie when the latter has a different aspect ratio to that of the screen.
object-fit: fill
In the fourth example we used the value fill:
<pre class=”brush: php; html-script: true”>
img {
width: 300px;
height: 300px;
object-fit: fill;
overflow: hidden;
}
</pre>
The result is identical to what we saw in Example 2 because it fill is the default value of the property, ie the one that is applied if the property itself is not declared.
With fill the image it expands to fill the whole area of the box, but the aspect ratio is not respected.
object-fit: cover
A middle ground between contain and fillis the value cover we applied in above Example :
<pre class=”brush: php; html-script: true”>
img {
width: 300px;
height: 300px;
object-fit: cover;
overflow: hidden;
}
</pre>
In this case the image extends over the whole area of the box, but to respect the aspect ratio is resized and cut as necessary. For the specifications of our initial project it is undoubtedly the most suitable solution. We obtained an effective result at a visual level, respected what we had proposed without having to fix the images first, with a single CSS instruction.
object-fit: scale-down
The other option is represented by the value scale-down above:
<pre class=”brush: php; html-script: true”>
img {
width: 300px;
height: 300px;
object-fit: scale-down;
overflow: hidden;
}
</pre>
The outcome actually coincides with that of the value contain.
object-fit: none
Finally, let’s see what we get using the last of the available values none in example above:
<pre class=”brush: php; html-script: true”>
img {
width: 300px;
height: 300px;
object-fit: none;
overflow: hidden;
}
</pre>
Here the image retains its original intrinsic dimensions, is not resized, expands throughout the box being cut out from the central area. Of all the solutions is the one that involves the greatest loss of areas of the starting image, it is a sort of zoom on the central area.
Use object-position
From this last example, we can start to explain how the complementary property a object-fit, works object-position. Its operation is identical to that of background-position: you place the object having as reference for the coordinates the upper left corner of the box.
In the last example we used this code:
<pre class=”brush: php; html-script: true”>
img {
width: 300px;
height: 300px;
object-fit: none;
overflow: hidden;
object-position: 0 0;
}
</pre>
In fact, now the image is placed in the box not starting from its central area but from the upper left corner according to the coordinates provided ( 0 0).
Support on Internet Explorer
As we mentioned at the beginning, the lack of support on Internet Explorer is not an insurmountable obstacle if you want to use these two properties. Microsoft’s browser simply ignores them. The result is that all the demos seen in the article, having been careful to use, overflow: hidden will be rendered by IE as in Example 1, ie resized according to the width and height set in the CSS but more or less deformed. Here is a screen captured with IE 11:
If the compromise is acceptable, that’s okay. Otherwise, we can use an excellent Javascript polyfill created by Anselm Hannemann.
