|
我希望图像适合屏幕，而不会在纵向和横向模式下被裁剪以进行响应式设计。我试过了:
<!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 处于纵向时加载的，它会拉伸(stretch)以填充屏幕的宽度，底部有空间，这就是我想要的。
但是，如果我将 iPhone 旋转到横向，图像现在会拉伸(stretch)以填充屏幕的宽度并在垂直方向上被裁剪。我想要的是让图像拉伸(stretch)以填充屏幕的高度，并在两侧留出空白。
为了看到这一点，我需要重新加载页面。有什么方法可以在 iPhone 旋转时实现正确的调整大小而无需用户重新加载页面？
Best Answer-推荐答案
这里可能有几个问题:
- 您必须将 html 和 body 设置为 height: 100% 才能让任何子元素知道“100%”的含义。
- 你的
这是我的解决方案:http://jsfiddle.net/k74w8bcf/
这应该会自动调整水平和垂直大小，并调整到浏览器窗口的大小(包括旋转) - 在 iOS 8.1.3 上经过测试。
关于html - 当 iPhone 从纵向旋转到横向时，CSS 将图像自动适应屏幕，我们在Stack Overflow上找到一个类似的问题：
https://stackoverflow.com/questions/28682493/
| 
客服电话
APP下载
官方微信
