Αλλαγή μεγέθους - CSS-Κόλπα

Η resizeιδιότητα ελέγχει εάν και πώς μπορεί να αλλάξει το μέγεθος ενός στοιχείου από τον χρήστη κάνοντας κλικ και σύροντας την κάτω δεξιά γωνία του στοιχείου.

.module ( resize: both; )

Είναι εξαιρετικά σημαντικό να γνωρίζετε: resize δεν κάνει τίποτα εκτός εάν η overflowιδιοκτησία έχει οριστεί σε κάτι διαφορετικό από αυτό visible, που είναι η αρχική του αξία για τα περισσότερα στοιχεία.

Αξίζει επίσης να γνωρίζετε ότι ο Firefox θα σας επιτρέψει να αλλάξετε το μέγεθος ενός στοιχείου μικρότερου από το αρχικό του μέγεθος. Τα προγράμματα περιήγησης Webkit δεν θα σας επιτρέψουν να αλλάξετε το μέγεθος ενός στοιχείου για να το κάνετε μικρότερο, μόνο μεγαλύτερο (και στις δύο διαστάσεις).

Αξίες

none: το στοιχείο δεν μπορεί να αλλάξει το μέγεθος. Αυτή είναι η αρχική τιμή για τα περισσότερα στοιχεία. Το textareaστοιχείο είναι η πιο κοινή εξαίρεση - σε πολλά προγράμματα περιήγησης η προεπιλεγμένη resizeτιμή είναι both.
both: ο χρήστης μπορεί να αλλάξει το μέγεθος του ύψους ή / και του πλάτους του στοιχείου.
horizontal: ο χρήστης μπορεί να αλλάξει το μέγεθος του στοιχείου οριζόντια (αυξάνοντας το πλάτος).
vertical: ο χρήστης μπορεί να αλλάξει το μέγεθος του στοιχείου κάθετα (αυξάνοντας το ύψος).
inherit: το στοιχείο κληρονομεί την τιμή αλλαγής μεγέθους της μητρικής του.

Όταν ένα στοιχείο έχει δυνατότητα αλλαγής μεγέθους, έχει μια μικρή λαβή UI στην κάτω γωνία. Η λαβή εμφανίζεται στα δεξιά της σελίδας στοιχεία όταν η σελίδα directionέχει ρυθμιστεί σε ltr(αριστερά προς τα δεξιά) και στα αριστερά rtl(δεξιά προς τα αριστερά) σελίδες.

Ένα στοιχείο χωρίς τη λαβή (μπροστά) και με τη λαβή (πίσω)

Διαδήλωση

Το στοιχείο με δυνατότητα αλλαγής μεγέθους σε αυτό το demo είναι μια παράγραφος. Κάντε κλικ στα κουμπιά για να δοκιμάσετε τις διαφορετικές resizeτιμές.

Δείτε το Pen Resize Demo από CSS-Tricks (@ css-tricks) στο CodePen.

Σχετιζομαι με

overflow
direction

Περισσότερες πληροφορίες

Η προδιαγραφή
Έγγραφα Mozilla
Το άρθρο του David Walsh
Κόλπα Textarea

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.