CSS - Đổi kích thước: Mang lại quyền kiểm soát kích thước phần tử cho người dùng

Xin chào các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ khám phá một thuộc tính CSS thú vị giúp người dùng trang web của bạn trực tiếp kiểm soát kích thước phần tử. Chào mừng đến với thế giới của resize!

CSS - Resize

what is the css resize property?

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu với một câu hỏi đơn giản: Bạn có bao giờ để ý đến những把手 nhỏ ở góc dưới bên phải của một số textarea cho phép bạn điều chỉnh kích thước của chúng không? Đó chính là thuộc tính resize đang hoạt động!

Thuộc tính resize trong CSS cho phép các phần tử có thể được người dùng thay đổi kích thước. Nó giống như tặng người dùng một把手 nhỏ để điều chỉnh kích thước của một số phần tử trên trang web của bạn. Thật tuyệt vời phải không?

Applies to

Bây giờ, bạn có thể đang tự hỏi, "Tôi có thể làm cho mọi thứ trên trang web của tôi có thể thay đổi kích thước không?" Well, không phải tất cả. Thuộc tính resize chủ yếu áp dụng cho các phần tử có overflow được đặt thành khác visible. Điều này thường bao gồm:

<textarea> elements
Elements with overflow: auto or overflow: scroll

Nhưng đừng lo lắng, chúng ta sẽ khám phá cách làm cho các phần tử khác có thể thay đổi kích thước!

Syntax

Hãy phân tích cú pháp cho việc sử dụng thuộc tính resize:

element {
resize: value;
}

Đơn giản phải không? Bây giờ, hãy khám phá các giá trị khác nhau mà chúng ta có thể sử dụng.

css resize values

Dưới đây là bảng tóm tắt tất cả các giá trị có thể cho thuộc tính resize:

Giá trị	Mô tả
none	Phần tử không thể thay đổi kích thước
vertical	Phần tử có thể thay đổi kích thước theo chiều dọc
horizontal	Phần tử có thể thay đổi kích thước theo chiều ngang
both	Phần tử có thể thay đổi kích thước cả hai chiều
inherit	Kế thừa giá trị từ phần tử cha

Bây giờ, hãy cùng khám phá từng giá trị này với một số ví dụ thú vị!

css resize - none value

textarea {
resize: none;
}

Mã này告诉浏览器, "Hey, don't let anyone resize this textarea!" It's like putting a "Do Not Touch" sign on your element.

css resize - vertical value

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

With this code, your textarea starts at 100px height and 200px width, but users can drag it to make it taller or shorter. It's like having an elevator for your text!

css resize - horizontal value

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

Here, we're applying resize: horizontal to a div. Remember, for non-textarea elements, we need to set overflow to something other than visible. Users can now adjust the width of this div, like stretching a rubber band!

css resize - both value

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

This is the ultimate flexibility! Users can resize the textarea in any direction, but we've set some limits to prevent it from becoming too small or too large. It's like giving your users a sandbox to play in, but with some fences to keep things under control.

css resize - inherit value

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

.child {
resize: inherit;
}

Here, the child element will inherit the resize behavior from its parent. It's like passing down a family heirloom, but for resizing!

css resize - arbitrary elements

Now, let's get a bit adventurous. What if we want to make a regular div resizable?

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

<div class="resizable-div">
<p>I'm a resizable div! Try to resize me!</p>
</div>

By setting overflow: auto and resize: both, we've turned an ordinary div into a resizable playground! It's like giving superpowers to your HTML elements.

conclusion

And there you have it, folks! We've explored the wonderful world of the CSS resize property. From locking down elements with resize: none to creating fully flexible components with resize: both, you now have the power to control how users interact with the size of elements on your webpage.

Remember, with great power comes great responsibility. Use the resize property wisely to enhance user experience, not to confuse or frustrate your visitors.

As you continue your journey in web development, keep experimenting with different CSS properties. Who knows? You might discover a new favorite trick to add to your coding toolkit!

Happy coding, and may your elements always be perfectly sized!

Credits: Image by storyset