Ιδιότητα Style objectFit

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

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

Η ιδιότητα αυτή λέει πώς το περιεχόμενο πρέπει να γεμίσει το κουτί. Για παράδειγμα, "διατηρήστε το πλάτος και το ύψος" ή "εκτείνετε και καταναλώστε όσο το δυνατόν περισσότερο χώρο".

Επίσης δείτε:

Εκμάθηση CSS:CSS object-fit

Καταχώρηση CSS:Η ιδιότητα object-fit

Παράδειγμα

Αποκοπή των πλευρών της εικόνας, διατήρηση του πλάτους και του ύψους και γεμίστε το χώρο:

document.getElementById("myImg").style.objectFit = "cover";

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

Γραμματική

Επιστροφή της ιδιότητας objectFit:

object.style.objectFit

Ρύθμιση της ιδιότητας objectFit:

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

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

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

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

Προεπιλεγμένη τιμή: fill
Αποτελεσματική τιμή: Ο χαρακτήρας που εκφράζει το μέγεθος του στοιχείου Η ιδιότητα object-fit.
Έκδοση CSS: CSS3

Υποστήριξη περιηγητή

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

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