CSS - 調整大小：賦予用戶控制元素尺寸的權力

你好，未來的網頁開發者們！今天，我們要深入探討一個令人興奮的 CSS 屬性，這個屬性將元素尺寸控制的權力直接交到訪客手中。歡迎來到 resize 的世界！

CSS - Resize

CSS Resize 屬性是什麼？

在我們深入細節之前，讓我們從一個簡單的問題開始：你有沒有注意過某些文本區域右下角的小把手，讓你可以調整它們的大小？那就是 resize 屬性在起作用！

CSS 中的 resize 屬性允許用戶調整元素的尺寸。這就像給你的用戶一個迷你拖動把手，以調整網頁上某些元素的大小。酷炫吧？

現在，你可能會想，"我能讓網頁上的所有東西都可以調整大小嗎？" 嗯，差不多。resize 屬性主要應用於設置 overflow 為除 visible 之外的元素的元素。這通常包括：

但別擔心，我們也會探討如何讓其他元素可調整大小！

讓我們分解一下使用 resize 屬性的語法：

element {
resize: value;
}

簡單吧？現在，讓我們探討一下可以使用哪些不同的值。

這裡是一個總結 resize 屬性所有可能值的表格：

現在，讓我們逐一探討這些值，並提供一些充滿活力的範例！

textarea {
resize: none;
}

這段代碼告訴瀏覽器："嘿，不要讓任何人調整這個文本區域的大小！" 就像在你的元素上貼了一個"請勿觸碰"的標誌。

textarea {
resize: vertical;
height: 100px;
width: 200px;
}

使用這段代碼，你的文本區域從 100px 高度和 200px 寬度開始，但用戶可以拖動它以使其更高或更短。就像給你的文本裝了一個電梯！

div {
resize: horizontal;
overflow: auto;
width: 200px;
height: 100px;
border: 2px solid blue;
}

在這裡，我們將 resize: horizontal 应用到一個 div 上。記住，對於非文本區域元素，我們需要將 overflow 設置為除 visible 之外的值。用戶現在可以調整這個 div 的寬度，就像拉伸一條橡膠帶！

textarea {
resize: both;
min-height: 100px;
max-height: 300px;
min-width: 200px;
max-width: 400px;
}

這是終極靈活性！用戶可以調整文本區域的任何方向，但我們設定了一些限制以防止它變得太小或太大。就像給你的用戶一個沙盒來玩耍，但有著一些柵欄來保持控制。

.parent {
resize: both;
overflow: auto;
}

.child {
resize: inherit;
}

在這裡，子元素將從其父元素繼承調整大小的行為。就像傳遞一個家族傳承，但對於調整大小！

現在，讓我們來點刺激的。如果我們想讓一個普通的 div 可調整大小怎麼辦？

.resizable-div {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #00f;
overflow: auto;
resize: both;
}

<div class="resizable-div">
<p>我是一個可調整大小的 div！試著調整我的大小！</p>
</div>

通過設置 overflow: auto 和 resize: both，我們將一個普通的 div 變成了一個可調整大小的遊樂場！就像給 HTML 元素賦予超能力！

好了，各位！我們已經探索了 CSS resize 屬性的奇妙世界。從用 resize: none 鎖定元素，到創建具有完全靈活性的組件，現在你可以控制網頁上元素的大小了。

記住，能力越大，責任越大。明智地使用 resize 屬性來提升用戶體驗，而不是讓訪客感到困惑或挫折。

在你繼續網頁開發的旅程中，請持續嘗試不同的 CSS 屬性。誰知道呢？你可能會發現一個新的最愛技巧，加入到你的編碼工具包中！

祝編程愉快，願你的元素總是恰到好處！

Credits: Image by storyset