Αντικείμενο-εφαρμογή - CSS-Κόλπα

Η object-fitιδιότητα καθορίζει πώς ένα στοιχείο ανταποκρίνεται στο ύψος και το πλάτος του πλαισίου περιεχομένου του. Προορίζεται για εικόνες, βίντεο και άλλες ενσωματωμένες μορφές πολυμέσων σε συνδυασμό με την object-positionιδιότητα. Χρησιμοποιείται από μόνη της, object-fitμας επιτρέπει να περικόψουμε μια ενσωματωμένη εικόνα, δίνοντάς μας έναν λεπτομερή έλεγχο του τρόπου με τον οποίο συμπιέζεται και τεντώνεται μέσα στο κουτί του.

object-fit μπορεί να οριστεί με μία από αυτές τις πέντε τιμές:

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

Έτσι μπορούμε να ορίσουμε αυτήν την ιδιότητα:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

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

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

Διαδήλωση

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

Δείτε την εφαρμογή αντικειμένων Pen από τον Robin Rendle (@robinrendle) στο CodePen.

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

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

Αξίζει να σημειωθεί ότι το iOS 8-9.3 και το Safari 7-9.1 της object-fitιδιότητας αλλά όχι object-position.

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