用css、如何让图片自动适应屏幕大小,不出现滚动条,不变形，兼容各个浏览器

Question

/*把图片做背景图*/#st-integral-page.background-box{width:100%;height:100%;top:0;z-index:-1;position:absolute;}/*把图片做背景图*/#st-integral-page.background-box.img-background{display:block;outline:none;border:0;height:100%;width:100%;}这样图片会变形.....

Answer 1

链接描述
这个其实是个很复杂的问题，要是简单就直接图片宽度100%，高度自适应，或者将图片当做背景来使用，然后在背景图片中添加一个background-size:contain;属性。如果你有空的话可以看一下我这篇博客，最后提到了手机淘宝响应式的原理，使用rem配合viewport。
                            

Answer 2

把img隐藏掉然后用js去把img的src获取赋给容器div作为背景图设置成cover就可以如果不用js又要兼容各个浏览器那么建议你用backgroundimage本来使用object-fit:cover也行但兼容性不行
一定要用img而兼容性又要好的话是一定要配合js的