使背景图像成为屏幕的大小 [英] Make background image the size of screen
问题描述
我想要背景图像填满屏幕，我不担心丢失宽高比。修正了一切，不要以为我错过了任何明显的...
HTML：
.phone {margin：auto; height：737px;宽度：654px; background-image：url（/ imgs / phone.png）;位置：固定;顶部：50％;剩下：50％; display：block;}。container {position：fixed;左：0;正确：0; top：0;底部：0;保证金：汽车;身高：536px; width：350px; border：1px solid; border-radius：5px; display：block;} iframe {width：350px; / *根据您的需要调整* /最大宽度：100％; / *使其响应* /} body {background-image：url（/ imgs / CV.png）;背景重复：不重复; background-size：auto;保证金：0;身高：100％; min-height：100％;}
CSS：
body {background-color：＃93B874; }< /风格><身体GT; < div className =phonestyle =margin：auto; height：630px; width：558px; background-image：url（/imgs/phone.png）; top：50％; left：50％;> < div className =container> < iframe style =height：458.18px; width：290px; margin：auto; position：relative; top：85px; left：132px; SRC = http://foodsharing-production.herokuapp.com >< / iframe中> < / DIV> < / div>< / html>
预览：
http://soupedupkitchencom.fatcow.com/CV/CV。 HTML
add background-size：cover to body
的规则或者如果您想确保显示整个背景图片，您可以使用 background-size：100％100％;
以下是一个片段与您的代码。如果您将 body 的背景大小更改为 auto （如您所见），您会看到原始大小的占位符图像
.phone {margin：auto; height：737px;宽度：654px; background-image：url（/ imgs / phone.png）;位置：固定;顶部：50％;剩下：50％; display：block;}。container {position：fixed;左：0;正确：0; top：0;底部：0;保证金：汽车;身高：536px; width：350px; border：1px solid; border-radius：5px; display：block;} iframe {width：350px; / *根据您的需要调整* /最大宽度：100％; / *使其响应* /}身体{背景图像：网址（http://placehold.it/200x150/fa0?text=这是一个图像）;背景重复：不重复;背景大小：100％100％;保证金：0;身高：100％; min-height：100％;} CSS：
< ;主体> < div className =phonestyle =margin：auto; height：630px; width：558px; background-image：url（/imgs/phone.png）; top：50％; left：50％;> < div className =container> < iframe style =height：458.18px; width：290px; margin：auto; position：relative; top：85px; left：132px; SRC = http://foodsharing-production.herokuapp.com >< / iframe中> < / DIV> < / body>
I want the background image to fill the screen and am not worried about losing aspect ratio. Have trued everything, don't think I'm missing anything obvious...
The HTML:
.phone {
margin: auto;
height: 737px;
width: 654px;
background-image: url("/imgs/phone.png");
position: fixed;
top: 50%;
left: 50%;
display: block;
}
.container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 536px;
width: 350px;
border: 1px solid;
border-radius: 5px;
display: block;
}
iframe {
width: 350px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
}
body {
background-image: url("/imgs/CV.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0;
height: 100%;
min-height: 100%;
}
The CSS:
body {
background-color: #93B874;
}
</style>
<body>
<div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;">
<div className="container">
<iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe>
</div>
</div>
</body>
</html>
Preview: http://soupedupkitchencom.fatcow.com/CV/CV.html
add background-size: cover to the rule for body
Or if you want to make sure the whole background-image is shown and really don't care about a distorted image, you can use background-size: 100% 100%;
Here's a snippet with your code. If you change back the background-size of body to auto (as you had it) , you see the original size of the placeholder image
.phone {
margin: auto;
height: 737px;
width: 654px;
background-image: url("/imgs/phone.png");
position: fixed;
top: 50%;
left: 50%;
display: block;
}
.container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 536px;
width: 350px;
border: 1px solid;
border-radius: 5px;
display: block;
}
iframe {
width: 350px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
}
body {
background-image: url("http://placehold.it/200x150/fa0?text=this is an image");
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0;
height: 100%;
min-height: 100%;
}
The CSS:
<body>
<div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;">
<div className="container">
<iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe>
</div>
</div>
</body>
这篇关于使背景图像成为屏幕的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
