Prevent white space when zooming. contain, cover, or 100%?

HTML & CSS
1

Which should be used here when using a fixed image?

background-size: cover;

background-size: contain;

background-size: 100%;

background-size: 100% 100%;
2

https://tympanus.net/codrops/css_reference/background-size/

Search "background-size for more URLs to resources

OR, Why don’t you try all 4 and see if one works.

3

They are in disagreement on this one.

Doesn’t work in firefox / Works in Chrome.
background-size: 100%;

Works in firefox / not Chrome
background-size: contain;

They are both in agreement that these work.
background-size: cover;
background-size: 100% 100%;

Now the question becomes, which of these is better to use.
And is there a difference.
background-size: cover;
background-size: 100% 100%;

Through process of elimination.

Firefox

These don’t work.
Whitespace is visible on zoom.

.one {
  background-size: 100%;
}

These work.
Whitespace is not visible on zoom.

.two {
  background-size: cover;
}

.three {
  background-size: 100% 100%;
}

.four {
  background-size: contain;
}

Chrome

These work.
Whitespace is not visible on zoom.

.one {
  background-size: 100%;
}

.two {
  background-size: cover;
}

.three {
  background-size: 100% 100%;
}

This one doesn’t work. Whitespace is visible on zoom.

.four {
  background-size: contain;
}
4

Both will cover the area with the image.

The difference is that 100% 100% will stretch the image to the width and the height of the element. If the elements width and height doesn’t match the aspect ratio of the image then the image will be stretched one way and squashed the other way.

‘Cover’ on the other hand makes sure the image covers the area required but does not lose aspect ratio so the image is never squashed or stretched even when the area to cover is not the same aspect ratio as the image. Of course this means that the image will be oversized so that it fits both dimensions and then cropped to the cover area.

If the element that contains the image is the same aspect ratio as the image then both methods are the same.

3 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.