CSS自适应屏幕图片大小，当iPhone从竖屏旋转到横屏时。

Question

CSS自适应屏幕图片大小，当iPhone从竖屏旋转到横屏时。

3

我希望在响应式设计中，图片可以在横屏和竖屏模式下都不被裁剪地适应屏幕。我已经尝试过以下方法：

<!doctype html>
<html>
<head>
<style>
img {
    max-height:100%;
    max-width:100%;
}
</style>
<meta name="viewport" content="initial-scale=1.0" />
</head>

<body>
<center>
<img src = "http://www.terragalleria.com/tmp/square.jpg" />
</center>
</body>
</html>

图片是一个正方形。如果在iPhone竖屏状态下加载页面，它会被拉伸以填充屏幕宽度，并留有底部空间，这正是我想要的。

但是，如果我将iPhone旋转到横屏状态，图片现在会被拉伸以填充屏幕宽度，并在垂直方向上被裁剪。相反，我想让图片拉伸以填满屏幕高度，并在两侧留有白色空间。

为了实现这一点，我需要重新加载页面。是否有方法可以在iPhone旋转时实现正确的缩放而无需用户重新加载页面？

- Quang-Tuan Luong

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joshua Whitley · Accepted Answer

这里可能有几个问题:

您必须将html和body设置为height: 100％，以使任何子元素知道“100％”的含义。
您的<center>标签不仅在HTML5中已弃用，而且如果不将其高度设置为100％，还会引起问题。

这是我的解决方案：http://jsfiddle.net/k74w8bcf/ 这应该可以自动调整水平和垂直大小，随着浏览器窗口大小的调整（包括旋转） - 在iOS 8.1.3上经过测试可行。