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

Source: Internet
Author: User

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?

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.