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

CSS object-fit Χρησιμοποιείται για να καθορίσει πώς θα ρυθμιστεί το μέγεθος του <img> ή <video> για να ταιριάζει στο κάδρο του.

ιδιότητα

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

Η τаблицή αριθμών στο παράδειγμα δείχνει την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως την ιδιότητα. Chrome IE Firefox Safari Opera
object-fit 31.0 16.0 36.0 7.1 19.0

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

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

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

Δείτε την εικόνα του τυρτινιού από το Shanghai Flower Port, είναι 300x300 εικονοστοιχεία:

Τούλιπ

αλλά, αν ρυθμίσουμε την εικόνα σε 200x300 εικονοστοιχεία, θα φαίνεται όπως:

Τούλιπ

Example

img {
  width: 200px;
  height: 300px;
}

Try it yourself

δούμε την εικόνα να συμπιέζεται για να ταιριάζει στο κάδρο 200x300 εικονοστοιχείων και το αρχικό αναλογικό του μήκους και πλάτους να καταστραφεί.

Αν χρησιμοποιήσουμε object-fit: cover;το οποίο θα κόψει τις πλευρές της εικόνας, θα διατηρήσει το αναλογικό του μήκους και πλάτους και θα καλυφθεί το χώρο, όπως εδώ:

Καφές

Example

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

Try it yourself

Αναγόμενο παράδειγμα

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

Στο παρακάτω παράδειγμα, δεν χρησιμοποιούμε object-fitυπονοείται ότι, όταν ρυθμίζουμε το μέγεθος του παραθύρου του περιηγητή, το αναλογικό του μήκους και πλάτους της εικόνας θα καταστραφεί:

Example

Try it yourself

Στο επόμενο παράδειγμα, χρησιμοποιούμε object-fit: cover;υπονοείται ότι, όταν ρυθμίζουμε το μέγεθος του παραθύρου του περιηγητή, διατηρούμε το αναλογικό του μήκους και πλάτους της εικόνας:

Example

Try it yourself

Όλες οι τιμές της ιδιότητας CSS object-fit

object-fit Η ιδιότητα μπορεί να αποδεχτεί τις εξής τιμές:

  • καλυπτικό - Προεπιλεγμένη τιμή. Επικροτήστε το μέγεθος του αντικαταστάτη για να καλυφθεί το πλαίσιο περιεχομένου του στοιχείου. Αν χρειαστεί, επεκτείνετε ή συμπιέστε το αντικείμενο για να ταιριάζει στο αντικείμενο.
  • κατακρύπτω - Επεκτείνετε το περιεχόμενο του αντικαταστάτη για να διατηρήσετε το αναλογικό του μήκους και πλάτους, ενώ τοποθετείται μέσα στο πλαίσιο περιεχομένου του στοιχείου.
  • κατακρύπτω - Επικροτήστε το μέγεθος του αντικαταστάτη για να διατηρήσετε το αναλογικό της μήκους και πλάτους κατά την κάλυψη του ολοκληρωμένου περιεχομένου του στοιχείου. Το αντικείμενο θα κόβεται για να ταιριάζει.
  • none - Do not adjust the size of the replacement content.
  • scale-down - Adjust the content size as if no content or contained content was specified (will result in a smaller specific object size)

The following examples demonstrate object-fit All possible values of the property:

Example

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

Try it yourself