如何禁用封面缩放？

我为我的网站创建了一个封面，如何禁用缩放或模拟效果，以便图像，口号和徽标始终具有相同的尺寸？如何禁用封面缩放？

2014-04-17 dabadaba

您可以通过HTML文档中插入一个标签像这样禁用变焦的移动设备（在更多信息可用：https://gist.github.com/JiLiZART/3132542和How can I "disable" zoom on a mobile web page?）

<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）

最后一个古怪的选项可能是使口号和徽标成为嵌入式闪存对象，但不推荐使用。

来源

2014-04-17 21:48:49 quetzaluz

可以将图像作为背景添加到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/

来源

2014-04-17 21:54:56 jordiburgos

代码我总是这样...挣扎哪能让'＃DIV the_img'覆盖的整个高度屏幕？ – dabadaba

使用相同的方法，但将* background-size：cover; *和* background-position：center center; *设置为BODY。 – jordiburgos

如何禁用封面缩放？

回答

相关问题