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

最新推荐文章于 2024-08-29 15:27:51 发布

程序员Fy

最新推荐文章于 2024-08-29 15:27:51 发布

阅读量1.9k

点赞数 16

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.csdn.net/fuyuo/article/details/125980741

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中的`zoom`和`overflow`属性。`zoom`用于设置元素的缩放比例，例如可以使图片放大或缩小。`overflow`属性则控制元素内容超出其容器时的处理方式，如`hidden`值可隐藏超出部分。通过实例展示了这两个属性的不同用法及其效果。

摘要由CSDN通过智能技术生成

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>