Property resize memungkinkan kalian  menentukan apakah suatu elemen dapat diubah ukurannya oleh pengguna, dan jika ya, sepanjang arah mana.

Saat ini dimungkinkan untuk mengontrol tampilan mekanisme pengguliran (jika ada) pada suatu elemen menggunakan properti overflow (mis. Overflow: gulir vs. overflow: disembunyikan dll.). Tujuan dari properti pengubahan ukuran juga untuk memungkinkan kontrol atas penampilan dan fungsi mekanisme pengubahan ukuran (mis. Kotak pengubah ukuran atau widget) pada elemen.

Ketika sebuah elemen dapat diubah ukurannya, agen pengguna menyajikan pengguna dengan mekanisme mengubah ukuran, yang biasanya “tombol” segitiga kecil di sudut kanan bawah elemen, mirip dengan yang kalian lihat di textareas. Kenop ini dapat diseret oleh pengguna untuk memperluas area teks ke arah mana pun – secara horizontal atau vertikal, atau keduanya.

Textarea resizable memiliki “kenop” segitiga kecil di sudutnya yang menunjukkan bahwa itu resizable. Kenop ini dapat diseret oleh pengguna untuk memperluas area teks dalam dua arah – secara vertikal dan horizontal.

Kalian dapat membuat elemen dapat diubah ukurannya di kedua arah atau baik secara horizontal atau vertikal.

Saat elemen diubah ukurannya, pengguna dapat menambah ukurannya dengan tidak bisa membuatnya lebih kecil dari itu. Namun, beberapa browser seperti Firefox akan memungkinkan pengguna mengubah ukuran elemen ke ukuran yang lebih kecil dari ukuran stKalianrnya.

Kalian bisa membuat elemen tingkat blok dan diganti, sel tabel, dan elemen blok inline diubah ukurannya menggunakan ukuran. Namun, mengubah ukuran tidak akan berpengaruh pada elemen kecuali nilai properti melimpah diatur ke sesuatu selain yang terlihat. Jika overflow berbeda pada sumbu tertentu (mis. Overflow-x vs overflow-y), maka properti ini berlaku untuk dimensi yang tidak memiliki nilai yang terlihat.

Properti resize juga digunakan untuk mencegah elemen antarmuka pengguna tertentu yang dapat diubah ukurannya secara default tidak diubah ukurannya, terutama textareas. Kadang-kadang memungkinkan pengguna untuk mengubah ukuran elemen dapat mempengaruhi seluruh tata letak di sekitar elemen dengan cara yang tidak diinginkan, sehingga kadang-kadang lebih baik untuk mencegah elemen dari yang diubah ukurannya, atau membatasi resizability ke satu arah saja, tergantung pada tata letak.

Official Syntax:

 

Penjelasan Values:

  • none: Elemen tidak dapat diubah ukurannya. Agen pengguna tidak menyajikan mekanisme pengubahan ukuran pada elemen, dan pengguna tidak diberikan mekanisme manipulasi langsung untuk mengubah ukuran elemen.
  • both: Elemen ini dapat diubah ukurannya di kedua arah (horizontal dan vertikal). Agen pengguna menyajikan mekanisme pengubahan ukuran dua arah untuk memungkinkan pengguna menyesuaikan tinggi dan lebar elemen.
  • horizontal: Elemen dapat diubah ukurannya secara horizontal. Agen pengguna menyajikan mekanisme pengubahan ukuran horizontal searah untuk memungkinkan pengguna menyesuaikan hanya lebar elemen.
  • vertical: Elemen dapat diubah ukurannya secara vertikal. Agen pengguna menyajikan mekanisme pengubahan ukuran vertikal searah untuk memungkinkan pengguna menyesuaikan hanya ketinggian elemen.
  • inherit: Elemen mewarisi nilai ukurannya dari induknya.

 

Contoh:

Yang berikut menonaktifkan resizability dari suatu textarea:

Contoh berikut membuat div hanya ukurannya yang bisa diubah ukurannya. Artinya, pengguna dapat menambah tinggi (atau menguranginya di Firefox):