Html background image problem?

requirements: the page has a large image as the background, which requires that no matter how the browser size changes, the background image will always be in the same proportion (will not be deformed), and will always be covered with the entire browser (there will be no cropping).

personal understanding that the use of css can not achieve the effect, the picture will not be cropped can not be guaranteed. Is that right?


if the ratio is equal, there will certainly be clipping, such as a 3:4 picture. If you change to 4:3, you will definitely cut part of it, but you can maintain the proportion and display the central position of the picture


.

background: url ('') no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

I think these css can meet your requirements to the maximum extent.


the background image is always in the same proportion (will not be deformed), and at the same time, it is always covered with the whole browser.
the size of the browser cannot be changed according to the proportion of the picture.


background: url ("") no-repeat center/cover;
try this css


the width-to-height ratio of the background image is not compatible with that of all browsers, so it does not achieve the effect of being full, undeformable and uncropped.


not cut, but also proportional, but also can be scaled at will, but also occupy the screen, use your head to think before asking questions. no, no, no.

Menu