CSS 响应式 BG 图像答案

【问题标题】：CSS Responsive BG ImagesCSS 响应式 BG 图像
【发布时间】：2014-10-20 05:10:20
【问题描述】：

我正在尝试创建一个全宽视差网站，但在获取部分背景图像以正确缩放时遇到问题。

如何在桌面视图中获得全宽图像以缩小并包含 100% 宽度但高度缩小并且图像包含适合宽度的比例？我遇到的问题是我无法将背景容器设置为最大高度。

我真的在寻找一种方法，当视口越来越小时，高度从 100% 缩小，这样图片的焦点就不会丢失，并且像响应式图像一样保持比例。

我也尝试过 background-size: contains 但即便如此，容器也必须有一个固定的高度，当背景图像缩小时，该高度必须改变，否则图像不会与容器流动。

#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 不会像响应式图像那样工作。

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： css html

【解决方案1】：

您需要使用background-size: contain 而不是background-size: cover。 Demo here

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

【讨论】：

问题是我不希望在较小的视口中高度为 100%。我希望它是流动的高度，就像响应式图像一样。
找到了解决方案。请参见下文。
我的解决方案确实允许图像的高度是流动的。如果您最小化宽度，那么高度会减小到宽度的比例。它是视口的 100%，所以当屏幕更小时它也是。但是，如果您的解决方案也有效，或者对您更好，那么这就是很棒的工作！

【解决方案2】：

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

只需添加

padding-bottom: %here

您无需为背景图片指定高度，只需 100% 宽度即可。

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

【讨论】：