我正在编写一个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游乐场放在一起进行测试:
-
如果图像宽度≤99%,背景位置x越小意味着图像向左移动 .
-
如果图像= = 100%宽,则background-position-x不执行任何操作
-
如果图像宽度≥101%,背景位置x越小意味着图像向右移动 .
对于以下情况,我计算了:
-
大容器:350x350px
-
图片:540x359px
-
表示:(100/350)* 540≙154%宽度
-
(100/350)* 359≙102%高度 .
-
另外:position-x:-28%和position-y:-0.28%
所以我渲染了一个页面(包括自动计算),尺寸大小合适 . 但正如我所说,较少的背景位置-x(-28%)意味着图像正确,图像的位置错误 .
它必须向左移动,因为我计算了-28%“左边距” . 所以我做了一些试验和错误,结果发现正确的位置将达到50%左右 .
这仍然是一个CSS3问题,还是我完全误解了这个属性的功能?
EDIT: here is an JSFiddle too
这是一张图片来说明我的目标...
1 回答
问题的关键在于您指定的百分比给出了容器和图像的位置 match . 此点在图像和容器中计算 .
因此,如果您希望图像居中,则意味着图像的中心位于容器的中心 . 所以,这是通过反复试验找到的 Value .
这里的关键是50%,因为背景位置 always 使图像居中,并且您不需要任何计算
如果为属性指定10%,则意味着图像左侧10%处的点位于容器左侧10%处 .
formula for this
如何从百分比转换为px(根据要求) . 假设您有一个大小为 n 的容器,并且图像的大小为 f 您指定的背景位置为 x % . 我们认为这是一个统一因素 a 是 a=x*100
容器中匹配的位置是 an . 要在图像中匹配的位置是 afn . 来自容器的图像位置是差异, afn-an ,可以 an(f-1) 给出 .
这解释了原因:
当f> 1时,属性的表观结果是反转的 . (图像比容器大 .
当f = 1时,结果为nil(图像大小与容器相同)
现在要将其转换为空间百分比,您只需要除以容器的大小( n )即可
a(f-1)
或除以图像的大小 (fn) 给
a(f-1)/f