Question

如何将图像设置为背景以使用多种移动设备不同的屏幕分辨率？例如，如果我在iPhone4上使用它，其分辨率小于iPhone6而不拉伸它或裁剪它并显示一半的图像。我想知道是否有机会显示图像的中间而不是应对它并显示图像的一半和半白。

.landing-page{
    background: url(../img/landing-portrait.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 80%;
    margin: 0;
}

如果我使用它，那么将显示几乎一半的图像，然后底部的一切都是白色的。如果我使用身高：100％;然后底部的白色空间越来越小，右侧的图像越来越大，内容不再在中间。

Answer 1

使用background-size: 100%;来实现您的目标。

background-size：100％;独立地拉伸背景图像完全覆盖内容区域的两个方向 - W3.org

例如，

.landing-page{
    background: url(../img/landing-portrait.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 80%;
    margin: 0;
}

您可以针对相同的HERE

推荐更多内容

希望这有帮助。

Answer 2

此答案不直接回答您的问题。但它给了你另一种选择，可以引导您采用新的方法。

我建议您使用figure和source代码。请阅读这些标签。我相信它们在未来可能会更频繁地用于响应式设计。

对于便携式媒体设备，您通常不需要高分辨率，并且可以通过加载/显示占用内存较小的图像来加快加载过程。

示例：

graph.nodes

这个例子有点高级（使用d3.json("swatwads.json", function(error, graph) { console.log(d3.max(graph.nodes, function(d) {return d.Year;} )); });），但支持 srcset预计将来会出现（我从中了解到）关于Udacity的响应式设计课程的讲师。你可能会只需使用<figure> <picture> <source media="(min-width: 750px)" srcset="images/still_life-800_large_1x.jpg 1x, images/still_life-1600_large_2x.jpg 2x" type="image/jpeg"> <source media="(min-width: 500px)" srcset="images/still_life-1000_medium.jpg" type="image/jpeg"> <img src="images/still_life-500_small.jpg" alt="Still Life"> <figcaption>Still Life</figcaption> </picture> </figure>属性。

基本上，您在此处指定的是媒体查询（视口的大小）和相应的源。 srcset可以动态选择要加载的图像，具体取决于屏幕的设备像素比例（例如，对于iPad2，您可以显示更加清晰的图像）。

如果浏览器不支持src标记，您可以使用通常的srcset标记优雅地失败。

如何将图像设置为不同移动屏幕分辨率的背景？

2 个答案: