Question

我有一个带背景图片的div。当用户从浏览器放大页面时（使用Ctrl＆amp; +或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;
}

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

Answer 1

也许你可以禁用视口缩放

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

干杯。

Answer 2

为元素设置False和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%;
}

防止背景图像放大

2 个答案: