Question

我已将图片设置为浏览器窗口的max-height:100%;（底部有一个小填充），以页面为中心。目前，我在浏览器调整大小时保持图像的宽高比不受挤压（有趣的是，在调整大小后刷新时以正确的宽高比显示）时，我遇到了问题。

我在codepen中设置了一个示例。非常感谢任何关于如何保持比率正确的建议。

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

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

Answer 1

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

Answer 2

图片的父元素.photo-bkg没有设置任何宽度，因此请添加width: 100%;

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

这应该可以解决问题。

Answer 3

你想要实现整页背景吗？

这对我有用：

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/

保留Chrome中全高响应图像的宽高比

3 个答案: