Html 当iPhone从纵向旋转到横向时，CSS自动将图像调整到屏幕_Html_Ios_Css_Iphone

Html 当iPhone从纵向旋转到横向时，CSS自动将图像调整到屏幕

html ios css iphone

Html 当iPhone从纵向旋转到横向时，CSS自动将图像调整到屏幕,html,ios,css,iphone,Html,Ios,Css,Iphone,我希望有一个图像适合屏幕，而不被裁剪的肖像和景观模式的响应设计。我试过： <!doctype html> <html> <head> <style> img { max-height:100%; max-width:100%; } </style> <meta name="viewport" content="initial-scale=1.0" /> </head> <body>

我希望有一个图像适合屏幕，而不被裁剪的肖像和景观模式的响应设计。我试过：

<!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>


img{
最大高度：100%；
最大宽度：100%；
}

图像是一个正方形。如果在iPhone处于纵向时加载页面，它会拉伸以填充屏幕宽度，底部有空间，这正是我想要的

但是，如果我将iPhone旋转到横向，图像现在会拉伸以填充屏幕宽度，并沿垂直方向进行裁剪。相反，我想要的是将图像拉伸，以在屏幕两侧填充空白

为了看到这一点，我需要重新加载页面。是否有任何方法可以在iPhone旋转时实现正确的大小调整，而无需用户重新加载页面

这里可能有几个问题：

您必须将html和body设置为height:100%，以使任何子元素都知道“100%”的含义

你的

标签不仅在HTML5中被弃用，而且如果你不给它100%的高度，它也会引起问题

以下是我的解决方案：

这将自动调整浏览器窗口的水平和垂直大小（包括旋转）-测试为在iOS 8.1.3上工作。

您介意接受它作为答案吗？不客气！抱歉，我以前不了解该功能！