防止背景图片放大答案

【问题标题】：Prevent background image from zooming in防止背景图片放大
【发布时间】：2018-02-01 05:31:41
【问题描述】：

我有一个带有背景图片的 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;
}

我知道正常的行为是放大页面内的所有内容，甚至是图像。但这是客户的要求，需要解决，即使我不同意。

【问题讨论】：

Disable zoom on a div, but allow zoom on the page (an alternate div)的可能重复
试试stackoverflow.com/questions/15233076/…

标签： css

【解决方案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%;
}

&lt;div class="owl-slide"&gt;Sample div&lt;/div&gt;

【讨论】：

谢谢。但是，当我放大此页面时，您示例中的图像也会放大。我想阻止这种情况。我也尝试更改我的代码，图像仍然放大。
运行 sn-p 并点击全屏。然后尝试缩放
对于某些人来说，一种解决方法可能是使用vw 和vh 之类的屏幕单位来表示background-size。至少在 Chrome 中，缩放似乎不会影响这些。但我不确定关于缩放和屏幕单位的规范是否足够清晰，以至于所有浏览器肯定会以相同的方式运行。同样使用此解决方案，您无法获得像“20px”这样的特定尺寸。

【解决方案2】：

也许你可以禁用视口缩放

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

干杯。

【讨论】：

感谢您的建议。但我需要保持页面可缩放 - 我只需要防止图像缩放。您的代码使整个页面无法放大。