html - 背景中的全屏图像在 iOS 上错误地调整大小并溢出

Question

我正在构建一个具有移动优先功能的单页网站，但我在低分辨率屏幕(例如智能手机等)上遇到全屏图像问题。我举了一个相当极端的例子，即使在大屏幕上也明显溢出，但是希望我正在尝试做的事情有意义。

我希望背景能够在高度上延伸，以便它实际上填满屏幕，但事实并非如此。也许是误用封面？

CSS:

html, body {
    height: 100%;
    width:100%;
    font-size:80px;
}

html {
        overflow-y: scroll;
}

.slider_images img {
    margin: auto;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    visibility: visible;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    overflow: hidden;
}
.slider_images {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: none;
    background-position: center center;
    background-repeat: no-repeat;
}

HTML:

<div class="slider_images">
    <img src="http://st.gdefon.com/wallpapers_original/583543_sneg_holod_portret_2560x1707_www.Gde-Fon.com.jpg" />
</div>

fiddle :http://jsfiddle.net/5yth09vk/6/

Answer 1

从 .slider_images 中删除 background- 样式，因为它是不必要的。

将 position: fixed 添加到 .slider_images img 规则。

http://jsfiddle.net/louis_feat/5yth09vk/8/

更新:要在图像上包含叠加层，请将其包含在 .slider_images div 中，您应该将其设置为 position: fixed 和 z-index: -1

示例:http://jsfiddle.net/louis_feat/5yth09vk/12/