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

Question

<div id="st-integral-page">

    <div class="background-box">
        <img class="img-background" src="./img/ic_rebpack_background.png" alt="">
    </div>
</div>

/*把图片做背景图*/
 #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的