Question

我希望图像适合屏幕而不会在纵向和横向模式下进行裁剪，以实现响应式设计。我试过了：

<!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旋转时实现正确的调整大小而无需用户重新加载页面？

Answer 1

这里可能存在一些问题：

您必须将html和body设置为高度：100％才能让任何子元素知道＆＃34; 100％＆＃34;装置中。
您的<center>代码不仅在HTML5中已弃用，但如果您不给它高度也会导致问题：100％。

这是我的解决方案：http://jsfiddle.net/k74w8bcf/

这应该在水平和垂直方向自动调整大小，并调整大小到浏览器窗口（包括旋转） - 在iOS 8.1.3上进行测试。

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

1 个答案: