resize: none|both|horizontal|vertical|initial;Giá trị thuộc tính:
- none
- both
- horizontal
- vertical
- initial
- Google Chrome 1
- Edge 79
- Firefox 4
- Opera 12.1
- Safari 3
-
none: Người dùng không thể thay đổi kích thước của phần tử. Đây là giá trị mặc định.
Ví dụ:
html
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: none;
overflow: auto;
}
h1, h2 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>resize: none;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
both: Phần tử có thể thay đổi kích thước ở cả hai chiều cao và rộng.
Ví dụ:
html
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: both;
overflow: auto;
}
h1, h2 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>resize:both;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
horizontal: Nó chỉ được dùng để thay đổi chiều rộng của phần tử. Việc thay đổi này được thực hiện bởi người dùng.
Ví dụ:
html
<!DOCTYPE html>
<html>
<head>
<title>tesize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: horizontal;
overflow: auto;
}
h1, h2 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>resize:horizontal;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
vertical: Nó chỉ được dùng để thay đổi chiều cao của phần tử. Việc này dựa theo yêu cầu của người dùng.
Ví dụ:
html
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: vertical;
overflow: auto;
}
h1, h2 {
color: green;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2 style="color:green;">resize:vertical;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
initial: Nó thiết lập thuộc tính về giá trị mặc định của nó. Nó giống với thuộc tính none.
Ví dụ:
html
<!DOCTYPE html>
<html>
<head>
<title>resize property</title>
<style>
.gfg{
border: 2px solid green;
padding: 25px;
width: 300px;
resize: initial;
overflow: auto;
}
h1, h2 {
color:green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>resize:initial;</h2>
<div class="gfg">
<h2 style="color:red;">Sudo Placement</h2>
<h3>Course Overview</h3>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</p>
<p>
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
</div>
</center>
</body>
</html>
Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi resize Property được liệt kê dưới đây: