Html 在 div 全屏宽度中设置背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21332332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set background image in div full screen width
提问by user3142828
I have an image background set in in wrapperlp at top of page. It works fine but its width is set at 1000px. I need this image to span across the full width of the screen, but when i change width nothing happens.
我在页面顶部的 wrapperlp 中设置了图像背景。它工作正常，但其宽度设置为 1000 像素。我需要这个图像跨越屏幕的整个宽度，但是当我改变宽度时什么也没有发生。
css
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
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>
回答by Andre Figueiredo
Besides other answers here, you can also use values coveror containin background-size:
除了此处的其他答案外，您还可以使用 valuescover或containin background-size：
cover
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
cover
覆盖值指定背景图像的大小应尽可能小，同时确保两个维度都大于或等于容器的相应大小。
background-size: cover;
contain
The contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container.
contains
包含值指定无论包含框的大小如何，都应缩放背景图像，使每一边尽可能大，同时不超过容器对应边的长度。
background-size: contain;
source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
来源：https: //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
回答by Alex Shilman
If you consider putting img inside of the div. This should do it.
如果您考虑将 img 放在 div 中。这应该做。
<div style="width:200px; height:200px">
<IMG SRC="URL.PNG" width="100%" height="100%"/>
</div>
To do this as a background image of the div, use
要将其作为 div 的背景图像，请使用
height: 200px;
width:200px;
background-image: URL(image.PNG)
background-size: contain;
In your CSS.
在你的 CSS 中。
回答by Sajad Karuthedath
If you need to get the content(image) to the full width of screen,you must set widthin percentage;that is 100% of screen
如果需要get the content(image) to the full width of screen，则必须set width按百分比表示；即100% of screen
width:100%;
always give max-widthin pxand widthin percentage when using max width
总是给人max-width以px和width在percentage出现using max width
回答by Arthur Yakovlev
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;
Hope its help you
希望对你有帮助
