Question

#home
    height: 100%
    width: 100%
    background-image: url("/lib/img/home.jpg")
    background-position: center center
    background-repeat: no-repeat
    background-attachment: fixed
    background-size: cover

您知道，我正在为我的CSS使用SASS。

问题是我想要我的家庭登陆页面是全屏尺寸和响应，我有一个风景图像，在全屏幕上工作正常，但在移动尺寸，它的高度不适合整个屏幕。对此有更好的解决方案吗？

Answer 1

    img_background {
        max-width: 2000px; // maximum width for the backgound pic
        min-width: 100px; // for mobile phones in portrait view
        position: absolute;
    }

此代码具有响应性，因此当您在PC上调整浏览器窗口大小时，它会将图像大小调整为浏览器的宽度。在移动设备上，将显示整个图像。

我希望这有帮助！

（编辑：这是CSS）

Answer 2

您可以使用bootstrap来响应您的元素。这样，元素大小将随分辨率屏幕而变化：

使用.container作为响应式固定宽度容器。

<div class = "container">
  ...
</div>

或者：

<div class = "container-fluid">
  ...
</div>

或者：

<div class = "container">
  ...
</div>

或者：

<img class="img-responsive" src="your_image.jpg">

还有更多使用bootstrap的解决方案，但基本的是这些。

查看此链接以获取更多信息：

Bootstrap

Answer 3

#home{
    height: 100vh;
    width: 100%;
    float: left;
    background-image: url("/lib/img/home.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*Note background attachment fixed not work in mobiles accurately like ios and also on ipads...
    USe background attachment scroll for the same...*/
    background-size: cover;
}

响应背景 - 想要100％的主页高度，但图像不包括在移动大小

3 个答案: