html - 当 iPhone 从纵向旋转到横向时，CSS 将图像自动适应屏幕
<p><p>我希望图像适合屏幕，而不会在纵向和横向模式下被裁剪以进行响应式设计。我试过了:</p>
<pre><code><!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>
</code></pre>
<p>图像是正方形。如果页面是在 iPhone 处于纵向时加载的，它会拉伸(stretch)以填充屏幕的宽度，底部有空间，这就是我想要的。 </p>
<p>但是，如果我将 iPhone 旋转到横向，图像现在会拉伸(stretch)以填充屏幕的宽度并在垂直方向上被裁剪。我想要的是让图像拉伸(stretch)以填充屏幕的高度，并在两侧留出空白。 </p>
<p>为了看到这一点，我需要重新加载页面。有什么方法可以在 iPhone 旋转时实现正确的调整大小而无需用户重新加载页面？ </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>这里可能有几个问题:</p>
<ol>
<li>您必须将 html 和 body 设置为 height: 100% 才能让任何子元素知道“100%”的含义。</li>
<li>你的 <code><center></code> 标签不仅在 HTML5 中被弃用，而且如果你不给它高度:100% 也会导致问题。</li>
</ol>
<p>这是我的解决方案:<a href="http://jsfiddle.net/k74w8bcf/" rel="noreferrer noopener nofollow">http://jsfiddle.net/k74w8bcf/</a> </p>
<p>这应该会自动调整水平和垂直大小，并调整到浏览器窗口的大小(包括旋转) - 在 iOS 8.1.3 上经过测试。</p></p>
<p style="font-size: 20px;">关于html - 当 iPhone 从纵向旋转到横向时，CSS 将图像自动适应屏幕，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/28682493/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/28682493/
</a>
</p>
页:
[1]