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。 Demo here

#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/responsive-web-design-fluid-background-images/

CSS响应BG图像

2 个答案: