CSS响应式BG图片

Question

我正在尝试创建全角视差站点，并且在获取背景图像以正确缩放部分时遇到问题。

如何在桌面视图中获取全角图像以缩小并包含100％的宽度，而高度收缩和图像包含比例以适合宽度？ 我遇到的问题是我无法将背景容器设置为具有最大高度。

我真的在寻找一种方法，当视口变得越来越小时，高度可以从100％减小，以使图像的焦点不会丢失，并像响应图像一样保持比例。

我尝试了background-size：也包含，但是即使那样容器也必须具有固定的高度，该高度必须随着背景图像的缩小而改变，因为否则图像不会随容器流动。

#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}

如果我删除高度，显然浏览器中什么也不会呈现，并且max-height无法像响应式图像那样工作。

有人可以帮我这个作用吗？

Answer 1

您需要使用background-size: contain而不是background-size: cover 。 在这里演示

#main-photo {
    background-image: url('images/main.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 100%;
    width: 100%;
}

Answer 2

我发现了一种使用填充技巧的解决方案，该技巧可以增加高度并允许图像保持其纵横比。 谢谢！

只需添加

padding-bottom: %here

您无需为背景图片指定仅100％宽度的高度。

这是一篇很棒的文章。 http://www.outsidethebracket.com/sensitive-web-design-fluid-background-images/