动态大小的图像

Question

我尝试将响应式图片添加到首页，扩展到页面的整个宽度。与许多滑块相似，但我只有一个图像，因此滑块过度。我已经设置了一个div并将它的背景图像和背景大小设置为100％并达到了宽度。我的问题是身高。我必须使用固定的高度才能显示div。我已尝试将高度设置为自动，但之后我无法获得图像。我尝试使用这种方法：

How can I resize an image dynamically with CSS as the browser width/height changes?

但我似乎无法正确缩放宽度。使用修复高度工作正常，直到浏览器窗口扩展超过图像的大小，然后它开始切断。关于我如何能够像宽度一样动态调整高度的任何想法？任何想法都将不胜感激！

我的代码：

CSS：

.banner {
    max-width: 100%;
    height: 720px;
    background: url(../images/homepagebanner.jpg) no-repeat left top;
    background-size: 100%;

}

HTML5：

<div class="banner"></div>

我正在使用bootstrap，但这是在容器之外，所以它不应该影响这段代码。

编辑这是代码笔： http://cdpn.io/xLvzA

Answer 1

您是否尝试将html的高度设置为100％，然后将横幅的高度设置为100％？添加一个codepen演示来显示您的确切问题可能有助于更好地帮助维护您所遇到的确切问题