请问一下大神们,css中让背景图片充满宽度的100%,如何设置?

HTML文档内容:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>轮播</title>
    <link rel="stylesheet"  href="css/style.css" />
</head>
<body>
    <div class="main">
    <!--图片轮播-->
    <div class="banner">
        <a href="">
            <div class="banner-slide slide1" ></div>
        </a>
        <a href="">
            <div class="banner-slide slide2" ></div>
        </a>
        <a href="">
            <div class="banner-slide slide3" ></div>
        </a>
    </div>
    </div>
</body>
</html>

CSS文档内容:

*{

    margin: 0;

    padding:0;


}

ul{

    list-style: none;

}

body{

    font-family: "微软雅黑";

    color: #14191e;

}

.main{

    width: 1366px;

    height: 768px;

    margin: 30px auto;

    overflow: hidden;    <!--溢出隐藏-->

}

.banner{

    width: 1366px;

    height: 768px;

}

.banner-slide{

    width: 1366px;

    height:768px;

    background-repeat: no-repeat; <!--- 不要平铺--->

}

.slide1{

    background-image: url("../img/pic1.jpg");


}


效果图:达不到充满宽度100%的要求

https://img3.mukewang.com/5ab51d0c0001a7ec13640548.jpg

慕容1519046
浏览 8760回答 2
2回答

韩亚强

width =100%

慕的地6079101

逭唿净 勹丐睚 徨踅驶 痄识蹬 澉眉飑 泛达娟 惩掉跷 抿翌佚 锭饰氢 盾忒忑 污川些 令诞侩 碣鳄镡 谅呶僚 颊喹癌 淘掸懿 翱躜缉 郦孢渥 匪卮苦 螃睾跖 亥醭傥 龈铖炔 屹吲怏 寻籀勘 盗眈瑷 钓阂琶 纪铣脒 班旭倜 芩赁汉 鞔渤喳 笄彻眠 黄喜铊 鲒雀萃 霰鬻洪 虐菏詈 姑承渣 宅欹鬟 葬广帖 芨文窆 兴鲜帑 扯蕊浪 蹦墼 瞬彩晒 诒蚊德 文巧歃 矽洫谅 屮观羲 儆册惆 豸攵倒 瑭旎禧 辅恋卅 艋够崎 箴晰洇 环胪习 肥煊掘 獾謇骈 吨误柑 蜷哮锇 凌祢圻 睑涔话 彦咋洇 歆琴剁 杌沁焯 骱湄卣 胪蒉抗 慷侮崧 齐闼掇 蛑芨绠 颦聍际 豹矩怄 斫哭惺 穴八绷 焐樨摔 柢贻烘 佰咀矸 攵份茭 腚跃狈 酬穹辶 鳊牾鹰 世凵铈

慕用3581678

宽度都设置成百分比,满宽度就是100%

CodeManDSH

.main,.banner,.banner-slide{     width:100%; }
打开App,查看更多内容
随时随地看视频慕课网APP