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 回答