我在页面顶部的 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>
最佳答案
除了此处的其他答案,您还可以在 background-size
中使用值 cover
或 contain
:
覆盖
cover 值指定背景图像的尺寸应尽可能小,同时确保两个尺寸都大于或等于容器的相应尺寸。
background-size: cover;
包含
contain 值指定无论包含框的大小如何,背景图像都应缩放,以便每一边都尽可能大,同时不超过容器相应边的长度。
background-size: contain;
来源:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
关于html - 在div全屏宽度中设置背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21332332/