全宽响应网站体像
全宽响应网站体像
提问于 2014-01-19 20:43:17
我被困在什么东西上了。我需要创建一个单一页面的网站与全宽度背景图像，但图像被削减在每一边打开时，在网站。
该网站在这里现场直播
目前，我正在使用后伸。但我已经尝试了与100%和自定义CSS，然后效果要么是相同的或更糟。甚至用封面作为背景尺寸。
有没有办法解决这个问题，以便图像应该在移动时正确打开？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-01-20 09:36:54
我是在js的帮助下这么做的。
function updateSize() {
var width = $(window).width();
var height = $(window).height();
$('.image-con').css('width', width);
$('.image-con').css('height', height);
};
$(document).ready(updateSize);
$(window).resize(updateSize);和CSS
.image-con {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}Stack Overflow用户
发布于 2014-01-19 20:51:32
使用CSS background-image属性而不是实际的img
body{
background:url(bg.jpg) no-repeat;
background-size:cover !important;
}您还会发现使用背景而不是img来操作其他页面元素要容易得多
Stack Overflow用户
发布于 2014-01-19 21:40:46
HTML元素(根)必须至少有min-height:100%
所以标记
<html style="min-height:100%; padding:0; margin:0;">
<body style="margin:0; padding:0; height:100%;"> </body>
</html>哦，是的，一旦经过测试，就会将这些内联样式提取到样式表中。
希望这能有所帮助。
编辑
这是你能做的最好的
css：
body {
/*background-attachment: scroll;*/
/*background-clip: border-box;*/
background-color: rgba(0, 0, 0, 0);
background-image: url("bg.jpg");
/*background-origin: padding-box;*/
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'PetitaBold';
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21222391
复制相关文章
相似问题
腾讯云开发者
