我希望背景图像填满屏幕，并且不担心失去宽高比。已经证实了一切，不要认为我错过了任何明显的事情......
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>
预览：http://soupedupkitchencom.fatcow.com/CV/CV.html http://soupedupkitchencom.fatcow.com/CV/CV.html
add background-size: cover的规则body
或者，如果您想确保显示整个背景图像并且确实不关心扭曲的图像，您可以使用background-size: 100% 100%;
这是您的代码片段。如果你改回背景大小body to auto（如您所见），您会看到占位符图像的原始大小
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
