Full Screen with background images ------- Day85,

Full Screen with background images ------- Day85,

Have you ever encountered a situation where you like an image very much, but unfortunately this image is a little small, but it is not nice to have a small piece of white, have you ever? I don't know, but I really met it. I like that image very much and want it to be a background, but it's a little small, so I figured out a solution.

Background-size: cover;

Background-size: contain;

The two seem similar, but the actual principle is really different:

Cover, translated as "coverage". This is a pure background filled with elements. It will compare the length and width of the image. If it is smaller, it will be expanded based on which one, the aspect ratio of the image itself remains unchanged, and the screen will only end when the image is scaled to a smaller value and filled in the corresponding direction;

Contain: the translation is "include". This means that the entire background is in the page. Generally, the image will be used when it is too large. What is the same as the size is, the aspect ratio is not changed, but it is not used to take a relatively large one of the two and use it as the benchmark to scale down, it is not until the relatively large side enters the screen;

Of course, there is also a classic filter in ie, which is not for trial now. I will share the code written by others.

Filter: progid: dximagetransform.microsoft.alphaimageloader(src+'.mybackground.jpg ', sizingMethod = 'Scale ');

In this way, the difference between images is not too broad. Which image should I use?