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>

小提琴：http://jsfiddle.net/5yth09vk/6/

Answer 1

从.slider_images删除position: fixed样式，因为它是不必要的。

将.slider_images img添加到.slider_images规则。

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

更新：要在图片上添加叠加层，请将其包含在position: fixed div中，您应将z-index: -1设置为public class UnityResolver : IDependencyResolver { protected IUnityContainer container; public UnityResolver(IUnityContainer container) { if (container == null) { throw new ArgumentNullException("container"); } this.container = container; } public object GetService(Type serviceType) { try { return container.Resolve(serviceType); } catch (ResolutionFailedException) { return null; } } public IEnumerable<object> GetServices(Type serviceType) { try { return container.ResolveAll(serviceType); } catch (ResolutionFailedException) { return new List<object>(); } } public IDependencyScope BeginScope() { var child = container.CreateChildContainer(); return new UnityResolver(child); } public void Dispose() { container.Dispose(); } }

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

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

1 个答案: