背景图片无法缩放以适合网站

Question

Live demo: http://leoaivy.github.io/projects/poster_inside/html/1_P.01_login.html

Questoin: ".login-bg-wrap a img" work well on desktop with max-width set to 100%. But on narrower devices like iphone 6, the background images just scale to fit the width of view port, which make their height become smaller. I set heihgt to just 1% or 100% but they scale to their original size. I don't know why? And is there a way to make the height of these images fit the height of the site?

Answer 1

You need to make sure that every element, down to the images, is set to have a width of 100%. And an extra min-width of whatever number you want to stop the shrinking at applied to the image itself.

And only the width, not the height.

Answer 2

You could remove the max-width , make the image's height and width 100%, and give it a object-fit: cover; Is that what you are trying to achieve?

You can also use 100vw on the width, and 100vh on the height, so that way the image will always have the viewport's size.