CSS - 调整元素大小

CSS resize是一个属性，允许用户根据指定的值调整元素的大小，无论是垂直方向、水平方向、两者还是均不调整。

Resize 属性在网页上元素的右下角添加一个手柄。该手柄允许用户单击并拖动来更改元素的大小，根据自己的喜好使其变大或变小。

CSS resize 属性

本章将介绍 CSS resize属性的使用，该属性可以采用以下值之一 -

  • none - 没有用户可控制的方法来调整元素的大小。这是默认值。

  • 垂直- 用户可以在垂直方向上调整元素的大小。

  • Horizo​​ntal - 用户可以在水平方向上调整元素的大小。

  • 两者- 用户可以水平和垂直调整元素的大小。

  • block - 用户可以在块方向上调整元素的大小（水平或垂直，取决于写入模式和方向值）。

  • inline - 用户可以在内联方向上调整元素的大小（水平或垂直，取决于写入模式和方向值）。

仅 Firefox 和 Safari 浏览器支持块和内联属性。

CSS 调整大小 - 演示

尝试为 CSS resize属性选择不同的值，然后调整框的大小以查看效果。

CSS 禁用文本区域的大小调整

以下示例演示了将 CSS resize属性设置为none值的用法。在这里我们看到用户无法在任何方向上调整元素的大小。resize : none是默认值。

<html>
<head>
<style>
   textarea {
      resize: none;
      background-color: #e7ef0e; 
      overflow: auto; 
      height: 100px; 
      width: 600px;
   }
</style>
</head>
<body>
   <textarea>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</textarea>
</body>
</html>

CSS 垂直调整元素大小

以下示例演示了设置为Vertical 的CSS resize属性的使用。在这里我们看到用户可以通过拖动右下角来垂直调整<div>元素的高度。

<html>
<head>
<style>
   div {
      resize: vertical;
      background-color: #e7ef0e; 
      overflow: auto; 
      height: 100px; 
      width: 600px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element vertically.</h3>
   <div>
   <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
   <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
   </div>
</body>
</html>

CSS 水平调整元素大小

以下示例演示了设置为水平的CSS调整大小属性的使用。在这里我们看到用户可以通过拖动右下角来水平修改<div>元素的宽度。

<html>
<head>
<style>
   div {
      resize: horizontal;
      background-color: #e7ef0e;
      overflow: auto;
      height: 150px;
      width: 550px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element horizontally.</h3>
   <div>
      <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
   </div>
</body>
</html>

CSS 水平和垂直调整元素大小

以下示例演示了设置为Both 的CSS resize属性的使用。在这里我们看到用户可以水平和垂直调整元素的大小。

<html>
<head>
<style>
   div {
      resize: both;
      background-color: #e7ef0e;
      overflow: auto;
      height: 150px;
      width: 550px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element vertically and horizontally.</h3>
   <div>
      <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
   </div>
</body>
<html>

CSS 调整元素大小继承了可调整大小功能

以下示例演示了如何使用 CSS resize属性集来继承子元素。在这里我们看到它将具有与其父元素相同的调整大小Behave。

<html>
<head>
<style>
   .box1 {
      resize: horizontal;
      background-color: #e7ef0e;
      overflow: auto;
      height: 250px;
      width: 550px;
   }
   .box2 {
      resize: inherit;
      background-color: #eee;
      height: 150px;
      width: 250px;
      overflow: scroll;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element.</h3>
   <div class="box1">
      <p>This is parent box which can be resized horizontally.</p>
      <div class="box2">
         <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
         <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
      </div>
   </div>
</body>
</html>

CSS 调整任意元素的大小

可以创建一个可调整大小的<div>容器，其中包含可调整大小的<p>（段落）元素，用户可以单击并拖动右下角来更改容器和段落的大小。以下示例演示了这种Behave。

<html>
<head>
<style>
   .box {
      resize: both;
      background-color: #e7ef0e;
      overflow: scroll;
      border: 2px solid black;
   }
   div {
      height: 250px;
      width: 550px;
   }
   p {
      height: 150px;
      width: 250px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element.</h3>
   <div class="box">
      <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
      <p class="box"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you ar going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
   </div>
</body>
</html>