overflow属性在一定区域内放大图片

最新推荐文章于 2022-07-19 21:44:04 发布

Ben. .

最新推荐文章于 2022-07-19 21:44:04 发布

阅读量932

点赞数 1

本文链接：https://blog.csdn.net/SHA925/article/details/100629844

版权

WEB 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

在一定区域内放大，效果如下：
放大前：放大前效果图放大后：放大后效果图

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">
            .a{  
                width: 498px;  
                height: 280px;  
                border: #000 solid 1px;  
                margin: 50px auto;  
                overflow: hidden;  
            }  
            img{  
                cursor: pointer;  
                transition: all 0.8s;  
            }  
            img:hover{  
                transform: scale(1.2);  
            }  
        </style>  
    </head>  
    <body>
    	<div class="a">
    		<img src="img/1.jpg" />
    	</div>
    </body>  
</html>

真（shui）讲解：在这里插入图片描述
首先，给图片设定范围并加一个border边框，.a{ width: 498px; height: 280px; border: #000 solid 1px; }接着加一个图片大小溢出边框之后隐藏的属性，.a{ overflow: hidden; }再为图片设置一个放大倍率（此为划过放大）img:hover{ transform: scale(1.2); }，最后为图片放大设置一个放大时间img{ cursor: pointer; transition: all 0.8s; }。

overflow属性，这个属性定义溢出元素内容区的内容会如何处理
（1）overflow ：hidden 隐藏，溢出部分隐藏。
（2）overflow : visible 可见，显示溢出内容,visible为默认值。
（3）overflow ：auto 自动，如有溢出内容，相应盒子便会显示滚动条。（元素框中可以放下所有内容不会出现滚动条。）
（4）overflow ：Scroll内容会被修剪，但浏览器会显示出滚动条以便查看其余内容
下面通过一个实例来讲解不同属性值的效果：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>列表符号</title>
		<style>
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
/*  overflow:auto;
overflow:hidden;  */
}
		</style>
	</head>
	<body>
<div>

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
（5）Overflow-x：设置当对象的内容超过其指定宽度时如何显示内容（水平滚动条）

<div style=" overflow-x:auto; width:200px; white-space:nowrap;"> </div>

（6）Overflow-y：设置当对象的内容超过其指定高度时如何显示内容（垂直滚动条）

<div style=" width:200px; height: 100px; overflow-y:auto; margin-top:100px;">
	<ul><li>新闻列表</li></ul></div>

Ben. .

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录