缩放

Avatar of Sara Cope
Sara Cope on

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 的元素。