CSS - 調整大小

上一頁
下一頁

CSS 的 resize 屬性允許使用者調整元素的大小，可以是垂直方向、水平方向、兩個方向或都不調整，具體取決於指定的值。

Resize 屬性在網頁元素的右下角新增一個手柄。此手柄允許使用者點選並拖動以更改元素的大小，使其根據自己的喜好變大或變小。

本章將介紹 resize 屬性的使用。

可能的值

  • none - 不允許使用者調整元素的大小。這是預設值。

  • vertical - 使用者可以垂直調整元素的大小。

  • horizontal - 使用者可以水平調整元素的大小。

  • both - 使用者可以水平和垂直調整元素的大小。

  • block - 使用者可以根據書寫模式和方向值在塊方向（水平或垂直）調整元素的大小。

  • inline - 使用者可以根據書寫模式和方向值在內聯方向（水平或垂直）調整元素的大小。

block 和 inline 屬性僅在 Firefox 和 Safari 瀏覽器中受支援。

應用於

溢位（overflow）屬性不為 visible 的元素，以及可選地表示影像或影片的替換元素和 iframe。

語法

resize: none | vertical | horizontal| both;

CSS resize - none 值

以下示例演示了將 CSS resize 屬性設定為 none 值的使用。在這裡，我們看到使用者無法在任何方向調整元素的大小。resize: none 是預設值。

<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 值

以下示例演示了將 CSS resize 屬性設定為 vertical 的使用。在這裡，我們看到使用者可以透過拖動右下角來垂直調整 <div> 元素的高度。

<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 值

以下示例演示了將 CSS resize 屬性設定為 horizontal 的使用。在這裡，我們看到使用者可以透過拖動右下角來水平調整 <div> 元素的寬度。

<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 值

以下示例演示了將 CSS resize 屬性設定為 both 的使用。在這裡，我們看到使用者可以水平和垂直調整元素的大小。

<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 值

以下示例演示了在子元素上將 CSS resize 屬性設定為 inherit 的使用。在這裡，我們看到它將具有與其父元素相同的調整大小行為。

<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 - 任意元素

可以建立一個可調整大小的 <div> 容器，其中包含一個可調整大小的 <p>（段落）元素，使用者可以點選並拖動右下角來更改容器和段落的大小。以下示例演示了此行為。

<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>
列印頁面
上一頁
下一頁
廣告