css - 背景位置、三分法图像和移动设计

Question

我正在处理在图像焦点上与三分法对齐的图像，并使用 background-image 将图像放在页面中。

当用户使用平板电脑(或更大)设备时，我正在使用 background-position:50%; 这很好；我不介意图片偏向一边。

但是，在移动设备上，我希望主题(在右边的第三行规则上——参见我的 JSBin 示例)在屏幕上水平居中。我知道我可以使用不同的百分比，例如 background-position:75% 50% 来关闭它，但随着设备宽度的变化，75% 不再是“中心”。

有没有一种方法，无需编写一百个不同的媒体查询使其始终居中，就可以使 background-position 足够动态以始终在移动设备上使图像居中？

这是一个 JSBin我正在查看的内容。

一些假设:

• 图片将始终按三分法对齐
• 图片将始终具有相同的物理尺寸
• 在 IE9+ 中工作
• 不担心垂直对齐

Answer 1

对于小于 768px 的尝试:

background-position: -50vw;

在这种情况下，您可能必须将背景大小设置为 150% 而不是覆盖。