4

我正在编写一个小的 WP 主题，需要一些新的 CSS3 background-size 属性的帮助。

我有一个包含图像作为背景的 DIV。图像本身被设置为大于 div 以呈现原始图像的一个小切口：

.imageContainer {
    background-size:154% 102%;
    background-position-x:-28%;
    background-position-y:0.28%;
}

到目前为止一切都很好。但是如果大小≥ 100%，调用 background-position 属性会变得很棘手。我整理了一些 JS/CSS Playground 进行测试：

  • 如果图像的宽度 ≤ 99%，则较少的 background-position-x 意味着图像向左移动。
  • 如果图像 == 100% 宽，则 background-position-x 什么都不做
  • 如果图像 ≥ 101% 宽，较少的 background-position-x 意味着图像向右。

对于以下情况，我计算了：

  • 大容器：350x350px
  • 图片：540x359 像素
  • 表示：(100/350) * 540 ≙ 154% 宽度
  • (100/350) * 359 ≙ 102% 高度。
  • 另外：位置-x：-28% 和位置-y：-0.28%

所以我渲染了一个页面（包括自动计算）并且大小大约是正确的大小。但正如我所说，较少的 background-position-x (-28%) 意味着图像正确，图像位置错误。

它必须向左移动，因为我计算了 -28% 的“左边距”。所以我做了一些试验和错误，结果发现正确的位置应该在 50% 左右。

这仍然是一个 CSS3 问题，还是我完全误解了这个属性的功能？

编辑： 这里也是一个 JSFiddle

这是一张图片来说明我的目标…… 在此处输入图像描述

4

1 回答 1

4

您的问题的关键是您指定的百分比给出了容器和图像匹配的点。这个点是在图像和容器中计算的。

因此，如果您希望图像居中，则意味着图像的中心位于容器的中心。因此，这是您通过反复试验找到的值。

这里的关键是 50%，因为 background-position总是让图像居中，你不需要任何计算

如果您为该属性指定 10%，则意味着图像中距左侧 10% 的点位于距容器左侧距 10% 的点处。

这个公式

如何从百分比转换为 px（根据要求）。假设您有一个大小为 n的容器，并且图像大了f倍您指定了x % 的背景位置。我们把它作为一个单位因子a是a=x*100

容器中要匹配的位置是. 图像中要匹配的位置是afn。容器中图像的位置是差异afn-an，可以给出为an(f-1)。

这就解释了为什么：

当 f > 1 时，该属性的明显结果被反转。（图像比容器大。

当 f = 1 时结果为 nil（图像与容器大小相同）

现在要将其转换为空间百分比，您只需除以容器的大小（n）即可

a(f-1)

或除以图像的大小(fn)得到

a(f-1)/f

于 2013-02-23T19:39:14.563 回答