保留Chrome中全高响应图像的宽高比 [英] Retain aspect ratio for full height responsive image in Chrome
问题描述
我已将图片设置为 max-height：100％; 浏览器窗口（底部有一个小填充），以页面为中心。目前，我在浏览器调整大小时保持图像的宽高比不会出现问题（有趣的是，在调整大小后刷新时以正确的宽高比显示）。
I've set an image to max-height:100%; of the browser window (with a small padding at the bottom), centred on the page. Currently, I'm having problems keeping the aspect ratio of the image from squashing when the browser is resized (interestingly it shows at the correct aspect ratio when refreshed after a resize).
我在codepen中设置了一个例子。非常感谢有关如何保持比率正确的建议。
I've set up an example in codepen. Would appreciate any advice on how to keep the ratio correct.
更新18/08：我已经在上面的copepen中更新了代码。它现在可以在Chrome以外的所有浏览器中使用，这会在调整浏览器大小时扭曲图像。奇怪的是，当编解码器处于编辑模式时，它在Chrome中可以很好地调整大小。我已经在我的开发网站上测试了codepen中的代码，它显示了同样的问题，所以它肯定不是一个codepen怪癖。希望有人可以提供帮助。
UPDATE 18/08: I've updated the code in the copepen above. It's now working in all browsers except Chrome, which distorts the image when the browser is resized. Oddly it resizes fine in Chrome when the codepen is in edit mode. I've tested the code from the codepen in my development site and it shows the same issue, so it's definitely not a codepen quirk. Hoping someone can help on this one.
进一步更新18/08：通过添加 max-width：100％解决了Chrome的这个问题，请参阅下面的答案。
FURTHER UPDATE 18/08: Solved this issue with Chrome by adding max-width:100%, see answer below.
推荐答案
解决了这个问题。图像需要 max-width：100％; 以及 max-height：100％; width：auto; 可在Chrome中使用。我已经更新了codepen以显示完整的工作代码： http://cdpn.io/sHJhl
Solved this issue. The image needed max-width:100%; as well as max-height:100%; width:auto; to work in Chrome. I've updated the codepen to show the full working code: http://cdpn.io/sHJhl
这篇关于保留Chrome中全高响应图像的宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
