Ubah saiz - Trik CSS | CSS Almanac 2025

The resizekawalan harta jika dan bagaimana unsur boleh ditukar saiznya oleh pengguna dengan mengklik dan menyeret sudut kanan bawah unsur.

.module ( resize: both; )

Sangat penting untuk diketahui: resize tidak melakukan apa-apa kecuali overflowharta itu ditetapkan kepada yang lain visible, yang merupakan nilai awalnya untuk kebanyakan elemen.

Perlu diketahui juga bahawa Firefox akan membolehkan anda mengubah ukuran elemen yang lebih kecil daripada ukuran asalnya. Penyemak imbas webkit tidak akan membiarkan anda mengubah ukuran elemen untuk menjadikannya lebih kecil, hanya lebih besar (dalam kedua dimensi).

Nilai

none: elemen tidak boleh diubah saiznya. Ini adalah nilai awal bagi kebanyakan elemen. The textareaelemen adalah yang paling biasa pengecualian masuk banyak pelayar lalai resizenilainya both.
both: pengguna dapat mengubah ukuran ketinggian dan / atau lebar elemen.
horizontal: pengguna dapat mengubah ukuran elemen secara mendatar (menambah lebar).
vertical: pengguna dapat mengubah ukuran elemen secara menegak (meningkatkan ketinggian).
inherit: elemen mewarisi nilai saiz semula induknya.

Apabila elemen diubah saiznya, ia mempunyai pemegang UI sedikit di sudut bawah. Pegangan muncul di elemen kanan di halaman apabila halaman directiondiatur ke ltr(kiri ke kanan), dan di sebelah kiri di rtl(kanan ke kiri) halaman.

Unsur tanpa pemegang (depan) dan dengan pemegang (belakang)

Demo

Elemen ukuran semula dalam demo ini adalah perenggan. Klik butang untuk mencuba nilai yang berbeza resize.

Lihat Demo Ubah saiz Pen oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

overflow
direction

Maklumat lanjut

Spesifikasi
Dokumen Mozilla
Artikel David Walsh
Trik Textarea

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.