当设备仅从纵向旋转到横向时，网页上的全屏图像被挤压
Posted
技术标签:
【中文标题】当设备仅从纵向旋转到横向时，网页上的全屏图像被挤压【英文标题】：full screen image on webpage is squashed when device is rotated only from portrait to landscape 【发布时间】：2014-07-31 05:26:52 【问题描述】：图像在设备上以纵向显示很好（覆盖整个背景），但当旋转为横向时，图像被压扁。仅当最初加载为纵向时才会发生这种情况；如果网站最初是横向加载的，当您在横向和纵向之间旋转时，它会显示得很好。我网站的其余部分不受影响。
这里只是图片的一部分：http://jsfiddle.net/pauljackson/66sqz/
还有我的网站：http://wabi-sabi.cc
html:
<body>
<div class="slide-wrapper">
<div class="full-video-wrapper">
<img src="http://www.wabi-sabi.cc/test/images/wabisabiwebvideo.jpg" id="bgimg" >
</div>
</div>
</body>
css:
body margin: 0; padding: 0; height: 100%; width: 100%;
.slide-wrapper
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
.full-video-wrapper
background: white;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
overflow: hidden;
#bgimg
height:100%;
width:auto;
margin:0 auto;
overflow:hidden;
【问题讨论】：
你确定这就是所有涉及的 CSS 吗？小提琴的行为与实际网站不同。 是的，它的行为确实不同，但不会影响我的问题；它出现在小提琴中，就像它在我的网站上一样。您必须在设备中打开它（我使用的是 iPad mini）。 【参考方案1】：我建议你使用这样的东西：
tag
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
这将覆盖该区域，但不会（据说）挤压您的图像。注意也；背景大小功能恕我直言是最好的方法；您可以在这里看到许多不同的设置： W3Schools
【讨论】：
感谢您的建议，但是在这种情况下，图像不会填满整个屏幕，它只是以原始分辨率显示，已修复。在 ipad 屏幕上，这意味着图像下方有很多空白区域。 封面不会给你空白包含意志；背景尺寸：封面；将最终以规定的方式覆盖您的区域；中心中心；将显示图像的中心。请在此处阅读更多信息：w3schools.com/cs-s-ref/… 固定的没关系；这就是我给你的例子；你需要根据你的个人需求来构建它。 好吧，我尝试实现这一点，但由于某种原因，背景现在在 980 像素处变为白色，没有图像。看这里：wabi-sabi.cc/test （顺便说一句，我在括号中的图片网址周围添加了单引号）以上是关于当设备仅从纵向旋转到横向时，网页上的全屏图像被挤压的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React Native youtube iframe 中切换到全屏（单击 YouTube 播放器 gui 上的全屏按钮旋转到横向）？