如何禁用封面的缩放？答案

【问题标题】：How can I disable zoom for cover page?如何禁用封面的缩放？
【发布时间】：2014-04-17 21:28:37
【问题描述】：

我为我的网站创建了封面，如何禁用缩放或模拟效果以使图像、标语和徽标始终具有相同的大小？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

最后一个古怪的选择可能是让标语和徽标成为嵌入式 Flash 对象，但不建议这样做。

【讨论】：

"你不能禁用浏览器的缩放，比如 chrome (ctrl +, ctrl -, cmd +, cmd -, 滚轮等)。"我不知道这在 2014 年是否正确，但现在不正确。处理根 div 上的“wheel”事件并使用 preventDefault

【解决方案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/上的代码

【讨论】：

我总是为此苦苦挣扎...如何让#the_img div 覆盖整个屏幕高度？
使用相同的方法，但将 background-size: cover; 和 background-position: center center; 设置为 BODY。跨度>