DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 的免费积分!
CSS 中的 zoom
属性允许您缩放内容。 它是非标准的,最初仅在 Internet Explorer 中实现。 尽管现在几个其他浏览器支持缩放,但不建议在生产网站中使用它。
.zoom {
zoom: 150%;
}
“支持的”值是
percentage
– 按此百分比缩放number
– 转换为百分比并缩放 - 1 == 100%;1.5 == 150%;normal
– zoom: 1;
如果您的浏览器支持它,您将看到这些图像大小不同
Check out this Pen!
缩放是 IE 的老方法。 您不应该在真实网站上使用它。 如果您想缩放内容,请使用 CSS 变换。 如果您需要 老 IE 支持,您也可以使用 过滤器。
在 IE6 的时代,缩放主要用作一种技巧。 IE6 和 IE7 中许多渲染错误可以使用缩放来修复。 例如,display: inline-block
在 IE6/7 中效果不佳。 设置 zoom: 1
解决了这个问题。 这个问题与 IE 如何渲染其布局有关。 设置 zoom: 1
会打开一个名为 hasLayout 的内部属性,从而解决了问题。
其他资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
任何 | 4.0+ | 无 | 无 | 5.5+ | 待定 | 待定 |
Safari 从版本 4 开始也支持 zoom
。 但是,它添加了一个新值:reset
。 这会告诉浏览器在缩放时不要缩放您的元素。 因此您的 cmd/ctrl+? 它不适用于应用了 zoom: reset
的元素。
我应该如何将图像放在由 jQuery 通过 CSS 制作的移动横幅上?
实际上,Vikram,在论坛上提问会更好。但是关于你的解决方案,使用定位来将div放置在图像上是一个好方法。给图像设置一个比div的z-index值更小的z-index值,这样div就会显示在移动横幅的顶部。
希望这能帮到你。
如果不行,请将文件发送给我,我会帮你编写代码。
干杯...
抱歉,我指的是z-index的相反情况。
给图像设置一个比div更高的z-index值。
例如:
.img {z-index:1000}
#div {z-index:10}
干杯...
嗨,我在iframe中遇到了问题。我在一个div中包含了一个iframe,div的宽度是固定的,如下所示
在这种情况下,我的iframe不能完全适应div,它从右侧被截断,我不想使用滚动条。
我应该如何使用zoom…?
很简单,你应该不要使用它 :D
没错。如果我引用文章的内容
此外,由于Firefox和Opera完全不支持它,并且任何使用
zoom
的代码都可能对布局或显示有重要影响,因此最好不要使用它。我发现当你想模仿页面放大缩小的功能(就像按下command/control-minus和command/control-equal键一样)时,zoom非常有用。你可以将它应用于html元素并通过JavaScript控制它。据我所知,没有办法通过transforms来实现这个功能。这应该是一种渐进增强的方式,因为它只在webkit/blink浏览器(Safari、Chrome、Opera、Maxthon)上有效。它在IE或Firefox上不起作用。
最好不要使用它,因为Firefox和Opera等浏览器非常流行,你不想让你的页面出现问题。话虽如此,我还是在将网站转换为移动版时(谨慎地)使用它。特别是处理背景图像为雪碧图的元素时。这确实有点偷懒,但它是一种快速解决方案。为什么在移动端可以使用呢?因为移动端最流行的两个浏览器都支持它(Chrome和Safari)。但再次强调,如果你能避免使用它就尽量避免。把它用在你知道屏幕尺寸是移动端尺寸的较低比例部分,例如@media
无论如何,这就是我所做的事情。
Chrome(27.0)和Opera(15.0)已经支持zoom: reset
1.5 == 150%;
有些网站在CRT屏幕上无法正常显示[设计断裂],但在LCD/笔记本电脑屏幕上显示正常。有什么办法可以解决这个问题?分辨率是正确的..如果我在CRT上进行负向缩放,它会显示得还可以..
我在IE中遇到了一个与zoom有关的不同问题
我使用jquery动画在页面上,我需要设置页面的最小高度和宽度,这样内容就不会与上面的标题重叠,所以对于分辨率较小的屏幕(小于1150像素宽),我在包含动画的div上设置了zoom为.075。
这在其他浏览器中运行完美,但在IE中,内容被压缩到占屏幕空间的75%,而在其他浏览器中,内容占用整个屏幕宽度,但区域被放大到125%。
你有什么建议可以解决这个问题吗?
http://www.xirrus.com/
有没有人愿意在我购买主题后,亲自指导我使用它?如果价格合理,我愿意支付服务费用。
你的图片坏了,服务在传递图片时出现了问题。
演示中的图片消失了。
我不同意zoom不应该在生产环境中使用。它应该使用,但应该使用transform: scale作为回退。为什么?因为在WebKit引擎中,zoom属性像缩放矢量图像一样缩放内容,而transform: scale就像在光栅图像上一样,当我们放大内容时看起来非常难看。
所以我们应该在WebKit和Trident中使用zoom,在其他浏览器中使用transform: scale。
有人可以帮我将网页在不同尺寸的显示器和不同的浏览器上居中吗?如果我在24英寸显示器上将浏览器缩放至110%,它看起来很完美;如果在19英寸显示器上缩放至90%,它看起来也很完美。这可以包含在css代码中吗?提前感谢
.effect:hover img {
transition: all 0.4s ease-in-out 0s;
opacity: 0.7;
-moz-transform: scale(1,2);
-webkit-transform: scale(50%,50%);
-o-transform: scale(2,2);
-ms-transform: scale(2,2);
transform: scale(2,2);
}
按这个比例进行缩放
数字 -
1.0 == 100%;
1.5 == 150%;
默认情况下为normal - zoom: 1;
有人能告诉我Firefox的zoom选项吗?...请
你需要使用transform scale来支持Firefox,你可以像这样尝试
-moz-transform: scale(1.3);
这是一篇我找到的文章,详细解释了这个方法 http://codeconvey.com/css-zoom-effect-using-scale-and-transition/
是否可以重置“zoom: reset”?就像我希望父元素不缩放,但子元素缩放?
如何从头开始创建一个三线菜单?
并且该菜单应该是响应式的,根据浏览器大小的变化而改变。
嗨!可以将表单发布到电子邮件吗?
” zoom : reset; ” 在IE中不起作用。
有什么等效的替代方法吗?
这不起作用…… :(
我只想让图像可悬停。请帮帮我..
我试过这个,我非常努力地尝试过,但我没有取得什么进展,但这并不重要。
有时,Zoom是放大页面的最佳方法。不幸的是,它不是css标准,但我希望它会成为标准。
transform: scale()的行为太不一样了:例如,如果你想放大整个页面,它会在周围创建更多空白。Zoom会以正确的方式放大每个元素,就像浏览器ctrl + 滚轮的行为一样:我认为它们是互补的,有时需要一个,有时需要另一个。希望未来的css实现将允许同时使用两者,每个都有自己的行为。
这在多点触控屏幕上可用吗?
‘zoom’是一个影响字体大小、图像大小和内容整体的因素,它保持内容的实际宽度,并允许文本换行和向下扩展。例如,它模拟了页面放大(ctrl +)。
‘transform’对元素应用了任意仿射变换,仅在渲染时生效;因此父元素会认为它的尺寸没有变化。并且,当放大时,它不会保持相同的宽度或导致文本换行,而是超出父元素的边界。
除了它不是标准之外,还有其他理由在生产环境中不使用zoom吗?我不明白transform如何实现zoom的功能。在生产环境中使用zoom会有什么后果?
在其他浏览器中也可以使用这种方法来实现同样的效果
transform: scale(0.34);
margin: -12px -6px -6px -20px;
嗨!
我阅读了所有这些内容,并正在寻找一种方法,将我的页面宽度:1280 适应移动 Android 浏览器宽度:360 和高度:640。
我想过将 index.htm 放入一个 iframe 中,宽度:100%(也放在表格中?),并将其命名为 360.htm,并将所有浏览器分辨率低于宽度:361 的页面转发到 360.htm。
我还希望 iframe 可以缩放,并过渡到旋转 90 度(或强制横向模式),并将其命名为 640.htm。
也就是说,我要进行一些实验性的修复和技巧来打破移动浏览器的规则,哈哈