Question

我正在努力实现全网响应式背景图片，如本网站所述http://www.dubsmash.com/ 我尝试将background-size: cover; background:url('image') no-repeat center center; overflow:hidden; min-height:100%应用于html 但结果却不同。

在dubsmash网站上查看图像始终如何居中的方式。他们使用jquery动态计算window.resize

上包装div内图像的高度，宽度和左，顶部属性

我的问题是，有人可以帮助我了解他们如何计算img

的宽度，顶部和左侧

更新：

我的代码到目前为止： HTML：

<div class="bgHome" style="position:fixed;z-index:-1;top:0;left:0;overflow:hidden">
        <img src="http://www.dubsmash.com/wp-content/themes/dubsmash2.0/pics/woman.jpg" style="position:absolute;top:0"/>
    </div>

jQuery的：

$(document).ready (function(){
    checkDims();
});

$(window).resize(checkDims);

function checkDims(){
    a = $(window).height();
    b = $(window).width();  
    $('.bgHome').css({"height":a,"width":b});
    $('.bgHome img').css({"height":a,"width":b});

}

更新-2 ：

<html></html>

的CSS：

html{
     background-size:100%;top:0; left:0;
     background:url('http://www.dubsmash.com/wp-content/themes/dubsmash2.0/pics/woman.jpg') no-repeat center center;
     overflow:hidden;width:100%;height:100%
}

Answer 1

他们的HTML看起来像：

<section class="module parallax" data-parallax="scroll" data-image-src="http://www.dubsmash.com/wp-content/themes/dubsmash2.0/pics/man_singing.jpg">
</section>

他们的CSS（或其中一些）：

padding: 240px 0;
background-repeat: no-repeat;
/* background-attachment: fixed; */
background-position: center;
background-size: cover;

然后有一堆javascript来处理那个视差

我建议将bgHome的背景图片设置为没有<img>作为孩子，然后在css中设置：

.bgHome{
    backgound-image: url('put-url-here');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Answer 2

尝试此解决方案并进行调整。由于某种原因，我无法粘贴链接，所以你会得到这个丑陋的：D

    Get it below

Codepen sample

使用CSS

2 个答案: