zoom

解释

zoom：设置或者检索对象的缩放比例
常用值：

normal:  默认值 使用对象的实际尺寸
number: 可以是百分比，无符号的浮点实数 如0.1或者百分数 如100%

例1

1，变大2倍

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">img{/*zoom:2.0;*/zoom:200%;}</style>
</head>
<body><!-- 引入一张照片，正常大小是沾满整个屏幕的 --><img src="D:\Desktop\4k壁纸\15and5.jpg">
</body>
</html>

如代码中，变大2倍有2个方法表示，取其中一个就行：

zoom:2.0;
zoom:200%;

例2

缩小一半：
将代码中：zoom:2.0; zoom:200%; 二行代码改为如下2种中其中一种：

zoom:0.5;
zoom:50%;

overflow

解释

zoom：设置或者检索对象的缩放比例
‘说明：这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
默认值： visible 可见的’

可以选择的值：

visible  默认值。内容不会被修剪，会呈现在元素框之外。
hidden  内容会被修剪，并且其余内容是不可见的。
scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

例1，hidden用法

当使用hidden值的时候，图片或者文本超出规定的范围时会被隐藏。
如下，本来是整个网页都会有这张图片的，但是用了hidden以后就只有显出规定部分了。
关键代码：

overflow: hidden;

代码如下：

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.main{/*宽高都是500px，图片是超过整个框图的*/width: 500px;height: 500px;border: solid black;overflow: hidden;}</style>
</head>
<body><div class="main"><!-- 引入一张照片，正常大小是沾满整个屏幕的 --><img src="D:\Desktop\4k壁纸\15and5.jpg"></div>
</body>
</html>

结果：

如图规定的框就500px，图片超出范围时就会被隐藏。

其他值用法

这些值用法固定用就是，不在过多演示。

前端：zoom的缩放功能，以及overflow介绍相关推荐

android缩放组件,Android控件实现图片缩放功能
1 简介先来一张效果图 TIM图片.gif 上图中灰色的一块是ImageView控件,ImageView中的图片进行左右上下移动,以及双指缩放. 对于android控件的缩放移动,点这里----an ...
win32 禁用缩放功能_Firefox 73 将引入全局缩放功能，在所有网站都可适用
Firefox 好久都没有用过了,刚刚无意中刷到又有新版本更新了(Firefox 73),好像很厉害的样子分享给大家. Firefox 用户可能很快就能在浏览器中为所有网站设置全局缩放级别.目前,用户 ...
按住 ctrl 并滚动鼠标滚轮才可缩放地图_Firefox 73 将引入全局缩放功能，在所有网站都可适用...
Firefox 好久都没有用过了,刚刚无意中刷到又有新版本更新了(Firefox 73),好像很厉害的样子分享给大家. Firefox 用户可能很快就能在浏览器中为所有网站设置全局缩放级别.目前,用户 ...
现代软件工程_团队项目_阿尔法阶段_前端及后端新增功能_v1.0.1_2017.11.29
前端及后端新增功能v1.0.2 本篇文章的后端功能由php实现,可在阿里云服务器上查看源代码一.实现功能简介: 注册新用户登录检验是否登录完善我的信息发布我的自习显示已有自习列表翻页查看 ...
html图片打印不出来 lodop_前端实现打印图像功能
前提:后台返回是绘制医用心电波形报告的数据,前端通过canvas在网页上绘制再进行打印并生成PDF文档! 一. 尝试LODOP打印插件之前前端表单打印功能有使用过LODOP打印插件,需安装相应的L ...
php web裁剪图片上传,WEB前端实现裁剪上传图片功能
最后的效果如下: 这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现: 1. 拖拽显示图片拖拽读取的功能主要是要兼听html5的 ...
浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
使用meta属性禁用手机浏览器的缩放功能
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能.这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看 ...
相册服务器位置,王者荣耀游戏相册是什么游戏相册开放服务器以及功能使用详细介绍...
王者荣耀游戏相册哪些服务器开放了?新功能怎么使用?对于这个新上线的功能,小伙伴们不太了解吧!没关系,下面是大麦子小编整理出来的游戏相册开放服务器以及功能使用详细介绍,希望可以帮到大家. 游戏相册灰度发 ...

前端：zoom的缩放功能，以及overflow介绍

目录

zoom

解释

例1

例2

overflow

解释

例1，hidden用法

其他值用法

前端：zoom的缩放功能，以及overflow介绍相关推荐

最新文章

热门文章