Mainīt izmēru - CSS-triki

Anonim

Par resizeīpašuma kontrolē, vai un kā elements var tikt mainīti, lietotājs, noklikšķinot un velkot apakšējā labajā stūrī elementa.

.module ( resize: both; )

Ļoti svarīgi zināt: resize nedara neko, ja vien overflowīpašums nav iestatīts uz kaut ko citu visible, kas ir tā sākotnējā vērtība lielākajai daļai elementu.

Ir arī vērts zināt, ka Firefox ļaus mainīt elementa izmēru, kas ir mazāks par tā sākotnējo izmēru. Webkit pārlūkprogrammas neļaus mainīt elementa izmēru, lai tas būtu mazāks, tikai lielāks (abās dimensijās).

Vērtības

  • none: elements nav maināms. Šī ir sākotnējā vērtība lielākajai daļai elementu. Šis textareaelements ir visizplatītākais izņēmums - daudzās pārlūkprogrammās tā noklusējuma resizevērtība ir both.
  • both: lietotājs var mainīt elementa augstuma un / vai platuma lielumu.
  • horizontal: lietotājs var mainīt elementa izmēru horizontāli (palielinot platumu).
  • vertical: lietotājs var mainīt elementa lielumu vertikāli (palielinot augstumu).
  • inherit: elements manto vecāka izmēra maiņas vērtību.

Kad elementa izmērs ir maināms, tā apakšējā stūrī ir mazs lietotāja saskarnes rokturis. Rokturis tiek parādīts lapas elementu labajā pusē, kad lapas directioniestatījums ir ltr(no kreisās uz labo), un kreisajā pusē uz rtllapām (no labās uz kreiso).

Elements bez roktura (priekšā) un ar rokturi (aizmugurē)

Demonstrācija

Šajā demonstrācijā lieluma lielums ir punkts. Noklikšķiniet uz pogām, lai izmēģinātu dažādas resizevērtības.

Skatiet CSS-Tricks (@ css-tricks) pildspalvas lieluma demonstrāciju vietnē CodePen.

Saistīts

  • overflow
  • direction

Vairāk informācijas

  • Spec
  • Mozilla Docs
  • Deivida Volša raksts
  • Textarea triki

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
4 4 * Nē 79 4

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 81. Nē