OGeek|极客世界-中国程序员成长平台

标题: html - 当 iPhone 从纵向旋转到横向时，CSS 将图像自动适应屏幕 [打印本页]
作者: 菜鸟教程小白    时间: 2022-12-13 05:27
标题: html - 当 iPhone 从纵向旋转到横向时，CSS 将图像自动适应屏幕

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

<!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-推荐答案


这里可能有几个问题:

  1. 您必须将 html 和 body 设置为 height: 100% 才能让任何子元素知道“100%”的含义。
  2. 你的
    标签不仅在 HTML5 中被弃用，而且如果你不给它高度:100% 也会导致问题。

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

这应该会自动调整水平和垂直大小，并调整到浏览器窗口的大小(包括旋转) - 在 iOS 8.1.3 上经过测试。

关于html - 当 iPhone 从纵向旋转到横向时，CSS 将图像自动适应屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28682493/





欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://sqlite.in/) Powered by Discuz! X3.4