Css 简明教程

CSS - Resize

CSS resize 是一个属性，允许用户根据指定的值，调整元素的尺寸，可以是垂直、水平、两者或者都不调整。

CSS resize is a property that allows users to adjust the size of an element, either vertically, horizontally, both, or none, based on the specified value.

调整大小属性会在网页中元素的右下角添加一个把手，此把手允许用户通过点击来改变元素大小，使其变大或变小，完全根据自己的喜好。

Resize property adds a handle at the bottom-right corner of an element on a webpage. This handle allows users to click and drag to change the size of an elements, making it larger or smaller according to their preference.

本章节将讲述调整大小属性的使用。

This chapter will cover the use of resize property.

可能的取值

Possible Values

  1. none − No user-controllable method for resizing an element is possible. This is default value.

  2. vertical − User can resize an element in the vertical direction.

  3. horizontal − User can resize an element in the horizontal direction.

  4. both − User can resize an element both horizontally and vertically.

  5. block − User can resize an element in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).

  6. inline − User can resize an element in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).

Applies to

具有 @{i6} 值的元素（除了可见元素，任意可选替换图像、视频或 iframe 元素）。

Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes

Syntax

resize: none | vertical | horizontal| both;

CSS resize - none Value

下面的示例展示了 CSS resize 属性设置为 none 值的情况。在这里，我们可以看到用户被阻止调整任何方向上的元素大小。 resize: none 是默认值。

Following example demonstrates use of CSS resize property set to none value. Here we see user is prevented from resizing the element in any direction. The resize: none is a default value.

<html>
<head>
<style>
   textarea {
      background-color: #e7ef0e;
      color: #ee2610;
      resize: none;
      overflow: auto;
      height: 150px;
      width: 250px;
   }
</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 resize - vertical Value

下面的示例展示了 CSS resize 属性设置为 vertical 的情况。在这里，我们可以看到允许用户通过拖动 <div> 元素的右下角，调整其高度大小。

Following example demonstrates use of CSS resize property set to vertical. Here we see user is allowed to resize the height of the <div> element vertically by dragging the bottom-right corner.

<html>
<head>
<style>
   div {
      background-color: #e7ef0e;
      color: #ee2610;
      resize: vertical;
      overflow: auto;
      height: 150px;
      width: 250px;
   }
</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>
   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.
   </div>
</body>
</html>

CSS resize - horizontal Value

下面的示例展示了 CSS resize 属性设置为 horizontal 的情况。在这里，我们可以看到允许用户通过拖动 <div> 元素的右下角，调整其宽度大小。

Following example demonstrates use of CSS resize property set to horizontal. Here we see user is allowed to modify the width of a <div> element horizontally by dragging the bottom-right corner.

<html>
<head>
<style>
   div {
      background-color: #e7ef0e;
      color: #ee2610;
      resize: horizontal;
      overflow: auto;
      height: 150px;
      width: 250px;
   }
</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>
      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.
   </div>
</body>
</html>

CSS resize - both Value

下面的示例展示了 CSS resize 属性设置为 both 的情况。在这里，我们可以看到允许用户在水平和垂直方向上调整元素大小。

Following example demonstrates use of CSS resize property set to both. Here we see user is allowed to resize the element both horizontally and vertically.

<html>
<head>
<style>
   div {
      background-color: #e7ef0e;
      color: #ee2610;
      resize: both;
      overflow: auto;
      height: 150px;
      width: 250px;
   }
</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>
      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.
   </div>
</body>
<html>

CSS resize - inherit Value

下面的示例展示了 CSS resize 属性在子元素上设置为 inherit 的情况。在这里，我们可以看到它的调整大小行为与父元素相同。

Following example demonstrates use of CSS resize property set to inherit on a child element. Here we see it will have the same resizing behavior as its parent element.

<html>
<head>
<style>
   .my-box1 {
      background-color: #e7ef0e;
      color: #ee2610;
      resize: vertical;
      overflow: auto;
      height: 150px;
      width: 250px;
   }
   .my-box2 {
      resize: inherit;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element.</h3>
   <div class="my-box1">
      <div class="my-box2">
         <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
         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.
      </div>
   </div>
</body>
</html>

CSS resize - Arbitrary Elements

可以创建包含调整大小 <p>（段落）元素的可调整大小 <div> 容器，其中用户可以通过点击并拖动右下角来调整容器和段落的大小。下面的示例演示了此类行为。

It is possible to create a resizable <div> container with a resizable <p> (paragraph) element inside it, where user can click and drag the bottom-right corner to change the size of both the container and the paragraph. Following example demonstartes this behavior.

<html>
<head>
<style>
   .my-box {
      background-color: #e7ef0e;
      color: #ee2610;
      resize: both;
      overflow: scroll;
      border: 2px solid black;
   }
   div {
      height: 250px;
      width: 250px;
   }
   p {
      height: 150px;
      width: 150px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element.</h3>
   <div class="my-box">
      <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
      <p class="my-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>