the first screen is the entire div,div with a background image. How can
display the background image exactly when the browser changes its size?
there is a compatibility problem with rem.
with percentage layout, the width is reduced while the height is unchanged, so it will be a problem to display the background image.
is there anything else I can do?
Thank you ~
you can try the following CSS
background-image:url("https://cdn.lfio.net/ACT.png");
height: 100%;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 0; background-size setting 100% or cover.
background images use high-definition images to prevent image distortion when tiling
rem is not compatible, it is estimated to consider IE8 and so on. Then the background-size, object-fit and the like won't work. Well, it looks like there's only js left.
or just use the img tag to bring up the background image
Previous: Node reports an error when downloading gitlab project with download-git-rep
Next: How does webpack handle small changes in projects that have been deployed online?