CSS object-fit ιδιότητα

Ορισμός και χρήση

Η ιδιότητα objectFit χρησιμοποιείται για να καθορίσει πώς θα προσαρμοστεί το μέγεθος του <img> ή του <video> για να ταιριάζει στο κουτί του.

Αυτή η ιδιότητα ενημερώνει πώς το περιεχόμενο γεμίζει το κουτί.

Δείτε επίσης:

Εκμάθηση CSSCSS object-fit

Εγχειρίδιο CSSCSS object-position

Εγχειρίδιο HTML DOMΙδιότητα objectFit

Παράδειγμα

Κόψτε τα δύο άκρα της εικόνας, διατηρήστε το αναλογικό της μέγεθος και γεμίστε το χώρο:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Δοκιμάστε το προσωπικά

Γλώσσα γραμματοσειράς CSS

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Τιμή ιδιότητας

Τιμή Περιγραφή
fill Προεπιλεγμένη τιμή. Προσαρμόστε το μέγεθος του περιεχομένου που αντικαθιστά για να γεμίσετε το πλαίσιο περιεχομένου του στοιχείου. Αν χρειαστεί, το αντικείμενο θα επεκταθεί ή θα συμπιέσει.
contain Αυξήστε το μέγεθος του περιεχομένου που αντικαθιστά για να διατηρήσετε το αναλογικό του μέγεθος και να ταιριάζει στο πλαίσιο περιεχομένου του στοιχείου.
cover Προσαρμόστε το μέγεθος του περιεχομένου που αντικαθιστά για να διατηρήσετε το αναλογικό της μέγεθος και να ταιριάζει στο πλήρες πλαίσιο περιεχομένου του στοιχείου. Το αντικείμενο θα κόβεται.
none Το περιεχόμενο που αντικαθιστά δεν προσαρμόζεται σε μέγεθος.
scale-down Ο όγκος του περιεχομένου είναι ίσος με τον none ή τον contain, ανάλογα με το ποιο από τα δύο έχει το μικρότερο μέγεθος αντικειμένου.
initial Αναθέστε αυτήν την ιδιότητα στη προεπιλεγμένη της τιμή. Δείτε: initial.
inherit Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε: inherit.

Τεχνικές λεπτομέρειες

Προεπιλεγμένη τιμή: Δείτε τις ξεχωριστές ιδιότητες.
Προγενέστερη κληρονομιά: Όχι
Δημιουργία αニμασίας: Δεν υποστηρίζεται. Δείτε:Αντικειμενικές ιδιότητες της αニμασίας.
Έκδοση: CSS3
Γλώσσα γραμματοσειράς JavaScript: object.style.objectFit="cover"

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

Τα αριθμητικά στοιχεία στη τаблицή σημειώνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτήν την ιδιότητα.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0