通过右下角图标进行拉伸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } .all { width: 500px; height: 500px; /* 上下拉伸 */ /* resize: vertical; */ /* 左右拉伸 */ resize: horizontal; /* 可以上下左右拉伸 */ /* resize: both; */ /* 取消拉伸效果 */ /* resize: none; */ /* 鼠标变成可拉伸的形态 */ cursor: ew-resize; /* 必须要配合overflow来使用resize, 否则拉伸图标无法显示 */ overflow: hidden; background-color: aqua; } </style> </head> <body> <div class="all"> <!-- content 要展示的内容区域 --> <div class="content">拉伸</div> </div> </body> </html>
效果：
我们也可以限制拉伸的尺寸
通过设置min-width、min-height、max-width和max-height可以限制拉伸尺寸。
通过拉动边框来进行拉伸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0px; padding: 0px; } .container { position: relative; /* 脱离文档流 */ float: left; } /* */ .resizable { width: 200px; height: 200px; overflow: scroll; resize: horizontal; cursor: ew-resize; opacity: 0; min-width: 200px; } /* 更改拖拽图标的大小和父容器一样大 */ .resizable::-webkit-scrollbar { width: 20px; height: 200px; } /* 使用定位, 将容器定位到父容器的正中间, 跟着父容器的大小改变而改变 */ .content { margin: 0; height: 200px; position: absolute; top: 0; /* 留出5px为了鼠标放上去可以显示拖拽 */ right: 5px; bottom: 0; left: 0; background-color: red; } </style> </head> <body> <div class="container"> <!-- resizable 用于拖拽的工具 --> <div class="resizable"></div> <!-- content 要展示的内容区域 --> <div class="content">content</div> </div> </body> </html>
