gpt4 book ai didi

html - 当 iPhone 从纵向旋转到横向时,CSS 会自动调整图像以适应屏幕

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:17:25 25 4
gpt4 key购买 nike

为了响应式设计,我希望在纵向和横向模式下不裁剪图像以适应屏幕。我试过:

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

最佳答案

这里可能有几个问题:

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

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

这应该会自动调整水平和垂直大小,并根据浏览器窗口调整大小(包括旋转)- 在 iOS 8.1.3 上进行测试。

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com