背景大小改变图像答案

【问题标题】：background-size shifts image背景大小改变图像
【发布时间】：2016-01-18 10:28:21
【问题描述】：

我正在使用 skrollr 创建缩放效果，非常类似于 this。

我使用的背景图像是 SVG，通过将背景大小从非常高的值 (>2500%) 更改为 100% 来应用缩放效果。现在，一切正常，预计 CSS 属性“背景大小”似乎是有限的。我不能应用高于 ~2600% 的值。如果这样做，根据浏览器的不同，背景图像将被移动或根本不显示。

出现的问题是，对于固定值（例如 2500%），根据用户的屏幕尺寸和分辨率，图像可能无法正确显示（或根本不显示，如上所述）。有没有办法根据屏幕尺寸和分辨率来计算可能的最大背景尺寸是多少，以便正确显示图像？

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>

【问题讨论】：

你能发一个 JSFiddle 吗？另外，您使用的是什么浏览器和版本？
我在问题中添加了一个 JSFiddle 以及“核心代码”。似乎该问题特定于 svg-images。我正在使用 Google Chrome (v47.0.2526.111) 和 Safari (v8.0.7 (10600.7.12))

标签： html css background-image background-size

【解决方案1】：

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

这是我的JsFiddle。

【讨论】：