Question

我在页面顶部的wrapperlp中设置了图像背景。它工作正常，但其宽度设置为1000px。我需要这个图像跨越整个屏幕宽度，但是当我改变宽度时没有任何事情发生。

CSS

#wrapperlp {
    width: 100%;
    margin: auto;
}

@media screen and (max-width: 800px) {
    #wrapperlp {
        width: 90%;
        min-width: 100px;
    }
}

#headerlp {
    font-size: 30px;
    color: white;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

#para {
    font-size: 20px;
    color: white;
    text-align: center;
}


#game_img {
    height: 250px;
    width: auto;
    margin-bottom: -30px;
    position: relative;
    display: inline-block;
    float: left;
    margin-top:-35px;
    padding-top: 5px;
    max-width: 100%;
}

#video_play {
    position: relative;
    display: inline-block;
    float: right;
    margin-top:-30%;
    width:280px;
    padding-right:10px;
}


#spacer {            
    height: 40px;           
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 900px;
    padding-top:20px;
}

.reward_img {
    padding-left: 45px;
    padding-top: 5px;
    position: relative;
    display: inline-block;
    float: left;
}

HTML

 <div id="wrapperlp">
        <div style="background-image: url(); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
            <div id="headerlp">text</div>
            <div id="para">text</div>
            <div id="game_img"><</a></div>
        </div>
    </div>
    <div id="video_play">text</div>
    <div>
        <div id="spacer">
            <div style="position: relative; float: left">text</div>
        </div>

Answer 1

如果你考虑将img放入div中。这应该做到。

  <div style="width:200px; height:200px">
     <IMG SRC="URL.PNG" width="100%" height="100%"/>
   </div>

要将其作为div的背景图像，请使用

   height: 200px;
   width:200px;
   background-image: URL(image.PNG)
   background-size: contain;

在你的CSS中。

Answer 2

除了此处的其他答案，您还可以在cover中使用值contain或background-size：

<强>盖
封面值指定背景图像的大小应尽可能小，同时确保两个尺寸都大于或等于容器的相应尺寸。

background-size: cover;

<强>包含
包含值指定无论包含框的大小如何，都应缩放背景图像，使每个边尽可能大，同时不超过容器对应边的长度。

background-size: contain;

来源：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

Answer 3

background-image: url('../images/bg.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;

希望对你有所帮助

Answer 4

如果您需要get the content(image) to the full width of screen，则必须set width百分比;即100% of screen

width:100%;

当max-width

时，

始终在px和width percentag中using max width提供{{1}}

在div全屏宽度设置背景图像

4 个答案: