防止背景图片缩放

Question

我有一个带有背景图片的div。当用户使用浏览器缩放页面（使用Ctrl和+或Ctrl +滚动）时，我不想缩放图像。图像应该保持不变。有没有办法做到这一点？

这是包含背景图像的div的样式：

.owl-slide{
    background-image: url('...');
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我知道正常情况下会将页面内的所有内容，包括图片，一起放大。但这是客户的要求，需要解决，即使我不同意。

- Diana

---

可能是[禁用div的缩放，但允许页面上的缩放（备用div）]的重复问题(https://dev59.com/omYr5IYBdhLWcg3wLnVA)。 - Huelfe

尝试使用https://dev59.com/x2Up5IYBdhLWcg3wf3us。 - Stuart

Answer 1

设置元素的top和left值，并添加position:absolute。还需设置width和height。

.owl-slide {
  background-image: url('http://www.freepngimg.com/download/nature/1-2-nature-png-picture.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
}

<div class="owl-slide">Sample div</div>

- Sagar V

---

谢谢。但是当我放大这个页面时，你示例中的图片也会放大。我想要防止这种情况发生。我还尝试更改我的代码，但图片仍然会放大。 - Diana

运行代码片段并点击全屏。然后尝试缩放。 - Sagar V

对于一些人来说，解决方法可能是使用屏幕单位（如vw和vh）来设置background-size。至少在Chrome中，缩放似乎不会影响这些单位。但我不确定规范是否足够清晰，以至于所有浏览器都会表现得完全相同。此外，使用这种解决方案，您无法获得特定的大小，例如“20px”。 - V. Rubinetti

Answer 2

或许你可以禁用视口缩放

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

干杯。

- Daniele De Matteo

---

谢谢您的建议。但我需要保持页面可缩放 - 我只需要防止图像缩放。您的代码会阻止整个页面缩放。 - Diana