1

我设置了max-height:100%;浏览器窗口的图像（底部有一个小填充），位于页面中心。目前，我在调整浏览器大小时无法保持图像的纵横比不被挤压（有趣的是，在调整大小后刷新时它以正确的纵横比显示）。

我在 codepen 中设置了一个示例。将不胜感激有关如何保持比例正确的任何建议。

http://cdpn.io/sHJhl

更新 18/08：我已经更新了上面 copen 中的代码。它现在可以在除 Chrome 之外的所有浏览器中使用，它会在调整浏览器大小时扭曲图像。奇怪的是，当 codepen 处于编辑模式时，它会在 Chrome 中很好地调整大小。我已经在我的开发站点中测试了 codepen 中的代码，它显示了同样的问题，所以它绝对不是 codepen 怪癖。希望有人可以帮助解决这个问题。

进一步更新 18/08：通过添加 Chrome 解决了这个问题max-width:100%，请参见下面的答案。

4

3 回答 3

4

解决了这个问题。所需的图像max-width:100%;以及max-height:100%; width:auto;在 Chrome 中工作。我已经更新了 codepen 以显示完整的工作代码：http ://cdpn.io/sHJhl

于 2013-08-18T18:40:54.007 回答
0

图像的父元素.photo-bkg没有设置任何宽度，所以添加它width: 100%;

.photo-bkg { height:100%; width: 100%; }

这应该够了吧。

于 2013-08-15T12:26:37.267 回答
0

您想实现整页背景吗？

这对我有用：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

来源：http ://css-tricks.com/perfect-full-page-background-image/

于 2013-08-15T13:11:51.997 回答