html - 响应式背景 - 希望主页的高度为 100%，但图像无法覆盖移动尺寸

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)