Question

我为网络创建了一个封面，如何禁用缩放或模拟效果，以便图像，标语和徽标的大小始终相同？

Answer 1

您可以通过在html文档中插入这样的标记来禁用移动设备的缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

（更多信息请见：https://gist.github.com/JiLiZART/3132542和How can I "disable" zoom on a mobile web page?）

您无法为Chrome（ctrl +，ctrl - ，cmd +，cmd - ，scrollwheel等）等浏览器禁用缩放功能。此渲染由浏览器处理，如果您想要防止标语和徽标在不同比例下变形，最佳选择是提出响应式CSS样式。（更多信息请访问：disable the CTRL/Wheel zoom effect at runtime）

最后一个古怪的选择可能是将标语和徽标设为嵌入式Flash对象，但不推荐使用。

Answer 2

可以将图像作为背景添加到DIV，并将大小设置为DIV。即使用户进行缩放，图像也会保持其大小。

<div id="the_img">
</div>

CSS：

#the_img {
    width: auto;
    height: 300px; /* Preferred size */
    background-image: url('http://i.imgur.com/JNY1o.jpg'); /* image */
    background-size: cover;
    background-position: center center;
}

检查http://jsfiddle.net/4MFpu/

上的代码

如何禁用封面缩放？

2 个答案: