Question

图像在设备上以纵向显示正常（覆盖整个背景），但当旋转到横向时，图像会被压扁。只有当它最初作为肖像加载时才会发生;如果网站最初以横向方向加载，则在横向和纵向之间旋转时显示正常。我网站的其余部分不受影响。

这里只是图片的小提琴：http://jsfiddle.net/pauljackson/66sqz/

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

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

这将涵盖该区域，但不会（据称）压缩您的图像。另请注意;背景大小函数imho是最好的方法;您可以在此处看到许多不同的设置： W3Schools

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

1 个答案: