当设备仅从纵向旋转到横向时，网页上的全屏图像被挤压答案

【问题标题】：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" alt="Full Screen Image">
    </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）。

标签： html css image responsive-design landscape-portrait

【解决方案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/cssref/…
固定的没关系；这就是我给你的例子；你需要根据你的个人需求来构建它。
好吧，我尝试实现这一点，但由于某种原因，背景现在在 980 像素处变为白色，没有图像。看这里：wabi-sabi.cc/test
（顺便说一句，我在括号中的图片网址周围添加了单引号）