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

StackOverflow https://stackoverflow.com//questions/25051407

题

图像在设备上纵向显示精细（覆盖整个背景），但是当旋转到景观时，图像被压扁了。如果它最初加载为肖像，则否则才会发生这种情况;如果该站点最初装载在横向方向上，它会在横向和肖像之间旋转时显示正常。其余的网站不受影响。

这是一个只有图片的小提琴： 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;
}
.

有帮助吗？

解决方案

我建议你使用这样的东西：

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;
}
.

这将覆盖该区域，但不会（据说）挤压您的图像。还要注意;背景尺寸的函数imho是最好的方法;您可以在此处看到许多不同的设置： w3schools

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top