在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 用css、如何讓圖片自動適應屏幕大小,不出現(xiàn)滾動條,不變形,兼容各個瀏覽器

用css、如何讓圖片自動適應屏幕大小,不出現(xiàn)滾動條,不變形,兼容各個瀏覽器

<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%;
 }
 
 這樣圖片會變形.....
 
 
回答
編輯回答
巫婆

鏈接描述

這個其實是個很復雜的問題,要是簡單就直接圖片寬度100%,高度自適應,
或者將圖片當做背景來使用,然后在背景圖片中添加一個background-size: contain;屬性。
如果你有空的話可以看一下我這篇博客,最后提到了手機淘寶響應式的原理,使用rem配合viewport。

2017年10月3日 02:04
編輯回答
柒喵

把img隱藏掉 然后用js去把img的src獲取 賦給容器div作為背景圖 設置成cover就可以
如果不用js 又要兼容各個瀏覽器 那么建議你用backgroundimage
本來使用object-fit:cover也行 但兼容性不行

一定要用img而兼容性又要好的話 是一定要配合js的

2017年12月26日 16:29