我正在构建一个具有移动优先功能的单页网站,但我在低分辨率屏幕(例如智能手机等)上遇到全屏图像问题。我举了一个相当极端的例子,即使在大屏幕上也明显溢出,但是希望我正在尝试做的事情有意义。
我希望背景能够在高度上延伸,以便它实际上填满屏幕,但事实并非如此。也许是误用封面?
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/
最佳答案
从 .slider_images
中删除 background-
样式,因为它是不必要的。
将 position: fixed
添加到 .slider_images img
规则。
http://jsfiddle.net/louis_feat/5yth09vk/8/
更新:要在图像上包含叠加层,请将其包含在 .slider_images
div 中,您应该将其设置为 position: fixed
和 z-index: -1
关于html - 背景中的全屏图像在 iOS 上错误地调整大小并溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31557706/