使图像100％高度但比例宽度

Question

我遇到了问题，我觉得我的问题很难解释，这就是为什么我找不到答案。

我的网站的图片在列上的高度为100％。当你在视口宽度1000px上方查看时，它看起来很棒。但是当你向下滚动时，它显然会扭曲并且超级拉伸，就像这里的图像一样：

我的问题是，如何让图像不是背景图像，拉伸100％高度，但保持纵横比。有点像超大的js插件，但只在一个div而不是整个背景。

可以在http://faithpointdallas.com/422studios

看到该网站的实时版本

它在firefox中按预期工作，完全糟透了。有没有办法在所有浏览器中完成firefox的结果？

提前感谢您的帮助。

Answer 1

为什么不使用背景图片？ background-size属性完全符合您的要求。

删除HTML中的topImage div，然后尝试：

div.top {
  background: url("../img/dallas.jpg") no-repeat scroll center center / cover transparent;
  min-height: 300px;
  overflow: hidden;
  position: relative;
}

Answer 2

我认为您应该使用CSS将宽度提到100％。它应该可以解决你的问题。

background-size: 100%;

了解更多信息，请点击此处http://www.css3.info/preview/background-size/