The issue is getting an image to fill a rectangular area on a web page.
Image cover allows for an image to be scaled in both the horizontal and vertical axes to cover the rectangular area without distortion.
Consider a rectangular image area, perhaps at the top of the page. It has a set height but the width will change according to the width of the page. With a desktop browser the image has an aspect ratio biased on the width. It is much wider compared with the height. With a phone sized browser view the ratio could be 1:1 or even taller than the width, if the height isn’t adjusted according to the browser width.
Whilst the image can be scaled and cropped to size, the issue arises when the page is resized, be it viewed on a different device, orientation, or simply the browser size changed on the screen.
Image cover lets the browser size be infinitely variable with the sizing of this image rectangular space being properly responsive, not with a few set sizes.
Image cover provides the assurance that an area of a web page will be covered by an image. Adapting to the change in aspect ratio, width and height.
The first image is a a portrait orientation and the second is a landscape orientation. Change the size of your browser screen, either by pulling the edge in and out, or by rotating your tablet/phone, to see how the amount of image shown is adapted.
Cover background image created with a portrait orientation image
Cover background image created with a landscape orientation image
The originals of the above two images are shown below. Compare the images above with these to see how the image gets resized and cropped.
Early methods, of fully filling an image space, included stretching the image horizontally and vertically to fill the space. The image width and height are both set to 100%. Stretching an image both horizontally and vertically will lead to distortions, to a limited extent this may be acceptable.
The disadvantage with this is the resultant change to the image aspect ration. It works well for minor discrepancies but can look horrendous if the aspect ration to be fitted is vastly different to the original image. Consider a landscape image fitted in a portrait area.
When screens were of a few relatively fixed sizes this was of less consideration. Unless the browser was shrunk from full screen size, 1280 or 1024 pixels wide, there was a likelihood that browser views were similar and predictable.
However, today the situation has changed. With the greater pixel densities and the myriad of screen sizes and orientations the situation is less predictable. It’s very easy to have an image which is overstretched, making it look distorted.
The aim with image cover is to scale an image such that the image covers an area without gaps. Whilst retaining the proportions of the image it will be oversized in one dimension. This extra will be hidden.
The worst case occurs when the cover space is a landscape, and the offered image is portrait. In this case the image is scaled such that horizontally it reaches both the left and right edges. The corresponding vertical scaling will cause much of the top and bottom of the image to be lost from view.
When the image is scaled to fit its assigned box it can also be positioned. Dependant upon the image which you are using you may wish to centre horizontally and vertically. Or perhaps its an image with lots of sky and you would wish to keep the bottom edge with the bottom edge of the box.
Positioning alignment offers 9 set positions, together with percentage points. Examples of set positions are:
- absolute centre
- top left
- bottom middle/centre
These work best where the positioning is set to best use the image. If working generically it is likely that the centre of the box is the most versatile.
Implementing Image Cover
the image cover area is defined in HTML as:
<div class="head-image"> </div>
For the associated CSS a background image is set. we can align it to the centre, or one of the 4 corers or centre of a side. Often the image will be placed in the centre of the rectangle, which is what we’ll do.
The property governing cover is called object-fit. Cover is just one of its options. Also background-size is an equivalent.
Defining image cover using background
.head-image{
background-image:url(/images/header.jpg");
background-repeat:none;
background-size: cover;
background-position: 50% 50%;
width: 100%;
height: 300px;
}
Defining image cover using objects.
.head-image{
background-image:url(/images/header.jpg");
background-repeat:none;
object-size: cover;
object-position: 50% 50%;
width: 100%;
height: 300px;
}
object-fit vs background-size
Background-size is better supported by browsers. Object-fit is supported on all of the major browsers, except Internet Explorer, but their later editions. As an example MDN lists the Chrome support for background-size as 3 and for object-fit version 32.
Use of background-size can cause images to be omitted when printing.
Multiple Images
Background-image accepts the inclusion of more than one image.
background: url(sprite.gif), url(scene.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
In the example given above there is a stacking order as defined by the order in which the images are given. The first mentioned item is at the top of the stack. Note the background-size also has a corresponding number of entries.
I like this idea in that an older option was to create two DIVs defining an image for each. The DIVs were either nested or absolutely positioned on top of one another.
Don’t forget to use gif or png for the overlaid image.
