1

我有一个问题,我想我只是在措辞上遇到问题,这就是为什么我找不到答案。

我有一个网站,其图像在列上跨越 100% 的高度。当您在 1000 像素的视口宽度上方查看它时,它看起来很棒。但是当你向下滚动时,它显然会扭曲并且被超级拉伸,就像这里的图像:

在此处输入图像描述

我的问题是,我怎样才能拥有一个不是背景图像的图像,它可以拉伸 100% 的高度,但保持纵横比。有点像超大的 js 插件,但只在单个 div 上而不是整个背景上。

该网站的实时版本可以在http://faithpointdallas.com/422studios看到

它在 Firefox 中可以按需要工作,并且在 safari 中完全烂透了。有什么方法可以在所有浏览器中完成 firefox 结果?

提前感谢您的帮助。

4

2 回答 2

2

为什么不使用背景图像?那里的background-size属性正是您想要的。

删除topImageHTML 中的 div 并尝试以下操作:

div.top {
  background: url("../img/dallas.jpg") no-repeat scroll center center / cover transparent;
  min-height: 300px;
  overflow: hidden;
  position: relative;
}
于 2013-02-04T23:46:14.807 回答
1

我认为您应该使用 CSS 将宽度设为 100%。它应该可以解决您的问题。

background-size: 100%;

有关更多信息,请在此处查看http://www.css3.info/preview/background-size/

于 2013-02-04T23:45:52.227 回答