Question

我使用skrollr创建缩放效果，与this非常相似。

使用的背景图像是SVG，并且通过将背景尺寸从非常高的值（> 2500％）改变为100％来应用缩放效果。现在，一切都很好，期待看起来css属性＆＃34; background-size＆＃34;是有限的。我不能应用高于~2600％的值。如果我这样做，根据浏览器的不同，背景图像将被移动或者根本不会显示。

出现的问题是，对于固定值（例如2500％），取决于屏幕尺寸＆amp;用户具有的分辨率，图像可能无法正确显示（或根本不显示，如上所述）。有没有办法计算，取决于屏幕尺寸和＆amp;分辨率，背景大小最大的是什么，这样图像才能正确显示？

JSFiddle

CSS：

.bg-1 {
    background-color:black;
    background-image:url('http://imgh.us/world-map_sw-r.svg');
    background-size:3000% auto; /* change this to something (really) big, e.g. 7000 */
    background-position-y:43.55%; /* this number is specific to the svg */
    background-position-x:52.5%; /* this numbers is specific to the svg */
    background-repeat:no-repeat;
}

HTML：

<section class="content bg-1">
  <h1>Lorem ipsum dolor sit amet</h1>
</section>

Answer 1

尝试使用px而不是%，因为%的最大值为100

这是我的JsFiddle。

背景大小移动图像

1 个答案: