比例放缩（scale）和缩放（zoom）的作用有何不同

2024-08-20

CSS中zoom和scale的区别

zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方.zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置.另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算.运行<!DOCTYPE html><style>div { width:300px;height:100px; border:1px solid #CCC; font-size:0px; line-height:100

CSS3：{*zoom:1;}作用

CSS3:{*zoom:1;}作用 zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的.它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到. 可以让网页实现IE7中的放大缩小功能.比如你想让你的网页缩小为原来的一半,那么就在body中加入style="zoom:0.5" 设置zoom:1可以在IE6下清除浮动.解决margin导致的重叠等问题. 通常,当浮动子元素导致父元素塌陷的时候,只要给父元素加上overflow: hidden;来解决,但是对于I

iTween基础之Scale（缩放大小）

一.基础介绍:二.基础属性原文地址:http://blog.csdn.net/dingkun520wy/article/details/50684392 一.基础介绍 ScaleTo:改变游戏对象的比例大小到提供的值. ScaleFrom:将物体的大小从提供的值变化到原来的大小 ScaleAdd:增加游戏物体的大小. ScaleBy:成倍改变物体大小.Amount参数为倍数. ScaleUpdate:类似于ScaleTo ,在Update()方法或循环环境中调用.提供每帧改变属性值的环境.不依

flutter 踩坑小计： amap_base 地图缩放 zoom 设置无效的问题

这种问题估计也就我这种菜鸡能遇到了,因为我问了一些大佬,他们完全没遇到这类的问题. 如果你也遇到了,希望这篇文章能帮到你,倘若还不能解决你的问题,可以留言,我们共同研究. 问题:同样的插件,为什么偏偏我能遇到这种邪门问题,别人的就一帆风顺? 答案:菜是原罪! 场景描述: 在一个详情页面,需要展示地图,然后在真机上面调试的时候,地图显示的缩放比例完全跟zoom值不搭嘎,不管我的zoom值为5或是为15 经过几个小时的排查测试以及猜想,并且对一位大佬穷追猛问,之后发现是 addMarker 添加标记

css中的zoom的作用

1.检查页面的标签是否闭合不要小看这条,也许折腾了你两天都没有解决的 CSS BUG 问题, 却仅仅源于这里.毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题.快捷提示:可以用 Dreamweaver 打开文件检查,一般没有闭合的标签,会黄色背景高亮. 2.样式排除法有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围. 对于刚才锁定的问题 CSS 样式文件,逐行删除具体的样式定义,定位到具体的触

D3.js 使用缩放zoom时节点无法拖动，只能整体移动的问题

.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); }) https://stackoverflow.com/questions/31692431/d3-js-drag-is-disabled-when-use-zoom

zoom和transform:scale()的区别

zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来)做出页面后,再对页面进行缩放以兼容其他屏幕宽度. 定义 zoom和transform:scale()具体有什么区别呢?先来看看官方的定义: Specifies the initial zoom factor for the window or viewing area. This is a mag

[UE4]Scale Box：缩放容器

一.Scale Box只能有一个子控件,再拖放一控件进去是不行的. 二.Scale Box缩放保持长宽比例三. Scale Box.Strectching.Strectch:拉伸设置. Scale Box.Strectching.Strectch=Scale to Fill:填充满整个Scale Box,并且始终保持比例缩放. 四.Scale Box.Strectching.Strectch=Scale to Fit X:只充满横向(X轴),保持比例当纵向(Y轴)过小的时候,就会被裁减,保

2D转换下的zoom和transform:scale的区别

一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到,但是在web的世界里也可以这样理解它的意思,就是改变元素的尺寸,进行等比例的缩放. 在最初的那些尴尬的岁月里,zoom只能被IE浏览器兼容,但是现在能被除了FireFox以外的所有浏览器支持,甚至是移动端浏览器. zoom的值的类型可以是: 1.数值:0~1 当数值为0.

scale 和 zoom，以及zoom的一些变态用法

zoom和scale这两个东西都是用于对元素的缩放,一下是其中一些区别: 1.scale的缩小是以图片的中心,zoom的缩小是以图片的左上角. 2.zoom的缩放改变了元素占据的空间大小:而scale的缩放占据的原始尺寸不变,页面布局不会发生变化: 3.注意:如果给zoom赋值两次,会使zoom的最终值为二者的乘积关于zoom的一些变态用法: 1.如果zoom与position共同使用的话,在zoom上的相对距离就不用再手动乘以zoom的比例了,页面会自动计算,做相对位置的 2.在用js给z

zoom和transform:scale的区别

小tips: zoom和transform:scale的区别这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=5019 一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他

【 D3.js 进阶系列 — 6.1 】缩放的应用（Zoom）

缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { circles_group.attr("transform", "translate(" + d3.event.

css中zoom和transform:scale的区别

css中zoom和transform:scale的区别关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下面开始进行对zoom的探究. zoom:normal | <number> | <percentage> 默认值:normal 适用于:所有元素继承性:有动画性:是计算值:绝对长度取值: normal: 使用对象的实际尺寸.(等同于zoom:1) <number&g

zoom与transform:scale的区别

一. zoom特性 1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好. 2.定义: zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal(即1); 简单示例: 二. transform: scale 属于css3规范,IE9+的现代浏览器全部支持. 语法为:transform: scale(x,y);只支持数值(包括负值),不支持百分比; 衍生的属性值包括scaleX,scaleY; 简单示例: 三.对比差异 zoom的缩放是相对于

css 中 zoom和transform:scale的区别(转载)

一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: zoom的字面意思是“变焦”,摄影的时候常用到的一个概念.对于web上的zoom效果,你也可以按照此概念理解.可以改变页面上元素的尺寸,属于真实尺寸. 在旧的web时代.*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动,修复一些布局上的疑难杂症等. 其支持的值类型有:

鼠标hover元素scale/zoom中心点放大效果实例页面

CSS代码: .box { /* 可见视觉区域 */ width: 480px; height: 250px; position: relative; overflow: hidden; cursor: pointer; } .size { /* 广阔的海洋 */ width: 1000px; height: 1000px; position: absolute; left: 50%; top: 50%; margin: -500px 0 0 -500px; /* 水平居中 */ text-al

css zoom与scale区别

转自:http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/ 1.zoom的缩放是相对于左上角的:而scale默认是居中缩放: 2.zoom的缩放改变了元素占据的空间大小:而scale的缩放占据的原始尺寸不变,页面布局不会发生变化:所以二者会导致渲染的性能差异. 3.对文字的缩放规则不一致.zoom缩放依然受限于最小12像素中文大小限制:而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸.

zoom和transform scale

一.zoom zoom的字面意思是“变焦”,摄影的时候常用到的一个概念.对于web上的zoom效果,你也可以按照此概念理解.可以改变页面上元素的尺寸,属于真实尺寸. 在旧的web时代.*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动,修复一些布局上的疑难杂症等. 其支持的值类型有: 百分比值:zoom:50%,表示缩小到原来的一半. 数值:zoom:0.5,表示缩小到原来的一半. normal关键字:zoom:normal等同于zoom:1. 注意,虽然Chrom

小tips: zoom和transform:scale的区别

小tips: zoom和transform:scale的区别转自张鑫旭前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=5019 一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: zoom的字面意思是“变焦”,

Canvas绘图之平移translate、旋转rotate、缩放scale

画布操作介绍画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数方法描述 translate dx,dx 转换的量的 X 和 Y 大小 scale sx,sy 水平和垂直的缩放因子 rotate angle 旋转的量,用弧度表示.正值表示顺时针方向旋转,负值表示逆时针方向旋转. setTransform a,b,c,d,e,f 水平缩放,水平倾斜(与旋转有关),垂直倾

zoom作用

转自:http://www.cnblogs.com/top5/archive/2011/07/11/2103343.html css中的zoom的作用1.检查页面的标签是否闭合不要小看这条,也许折腾了你两天都没有解决的 CSS BUG 问题,却仅仅源于这里.毕竟页面的模板一般都是由开发来嵌套的,而他们很容易犯此类问题.快捷提示:可以用 Dreamweaver 打开文件检查,一般没有闭合的标签,会黄色背景高亮. 2.样式排除法有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS

比例放缩（scale）和缩放（zoom）的作用有何不同

热门专题