CSS resize属性

前言

之前写了一篇通过指令实现element弹窗的全屏与移动，但是关于拖拽放大的功能一直没有特别好的思路
直到看到了下面的这篇文章：
CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

通过 CSS的resize属性就可以实现该功能，关于弹窗的这个后期有空会重构一下。这里主要简单记录一下resize属性的相关使用。

对element弹窗的全屏与移动感兴趣的可以看一下我的这篇文章：
指令实现element弹窗的全屏与移动

resize

resize属性指定一个元素是否是由用户调整大小的。

语法

resize: none|both|horizontal|vertical:

none：用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。

实例

 <div class="content">调整属性指定一个元素是否由用户可调整大小的。</div>.content {border: 2px solid;padding: 10px 40px;width: 200px;resize: both;overflow: auto;
}

效果

注意点：

resize属性适用于计算其他元素的溢出值是不是"visible"。这句话说明必须加上overflow: auto;这个属性
从效果图中可以看出，当缩放到一定程度后会出现滚动条，因此在事件应用中要给div指定盒子的最大值和最小值

CSS resize属性相关推荐

CSS中的resize属性
CSS | 调整属性 (CSS | resize Property) Starting note: 开始说明: We deal with various elements regularly whil ...
CSS 自由缩放 resize属性
为了增强用户体验,CSS3新增的一个非常实用的 resize属性,它允许用户通过拖动的方式,来自由缩放元素的尺寸.这在以前只能通过Javascript 编写大量脚本来实现,费时费力,效率低下. res ...
纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制. webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar ...
CSS样式属性参考手册
CSS3 动画属性(Animation) 属性描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. ...
CSS 纵横比属性 --- aspect-ratio
什么是 aspect-ratio? 需求:对于一个响应式的网站,在缩放的时候,需要保持图片和视频的纵横比传统的 CSS 只能通过宽高自己计算纵横比,或者保持原始纵横比. 现在可以使用 aspec ...
css表格布局_布局秘密武器＃1：CSS表格属性
css表格布局 Right now, Flexbox is arguably THE hot new thing for layout building. Flexbox's almost mirac ...
CSS文字文本样式（font字体、css外观属性）
1. font字体 1.1. font-size:大小作用:font-size属性用于设置字号. p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. ...
html块元素设置min-width,css min-width属性怎么用
css min-width属性用于设置元素的最小宽度:该属性会对元素的宽度设置一个最小限制.因此,元素可以比指定值宽,但不能比其窄:不允许指定负值.所有主流浏览器都支持 min-width 属性. c ...
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...

CSS resize属性

前言

resize

CSS resize属性相关推荐

最新文章

热门文章