Question

我被某事困住了。我需要创建一个带有全宽背景图像的单页网站，但是当在网站上打开时，图像会在每一侧被剪切。

该网站正在here

上线

目前我正在使用backstretch。但我尝试使用100％和自定义CSS然后效果是相同或更糟。甚至使用封面作为背景尺寸。

有没有办法解决这个问题，以便图像在移动设备上正确打开？

Answer 1

使用CSS background-image属性而不是实际的img

body{
  background:url(bg.jpg) no-repeat;
  background-size:cover !important;
}

您还会发现使用背景而不是img来操纵其他页面元素要容易得多

Answer 2

HTML元素（root）必须至少具有min-height:100%

所以Markup

<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'; }

Answer 3

我是在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%;
}

全宽响应网站的身体形象

3 个答案: