Αντικείμενο-θέση - CSS-Κόλπα

Η object-positionιδιότητα χρησιμοποιείται σε συνδυασμό με την object-fitιδιότητα και καθορίζει τον τρόπο τοποθέτησης ενός στοιχείου όπως βίντεο ή εικόνας με συντεταγμένες X / Y μέσα στο πλαίσιο περιεχομένου της. Αυτή η ιδιότητα έχει δύο αριθμητικές τιμές, όπως 0 10%ή 0 10px. Σε αυτά τα παραδείγματα, ο πρώτος αριθμός δείχνει ότι η εικόνα πρέπει να τοποθετηθεί στα αριστερά του πλαισίου περιεχομένου (0), το δεύτερο ότι θα πρέπει να τοποθετηθεί 10% ή 10px από την κορυφή. Είναι επίσης δυνατό να χρησιμοποιηθούν αρνητικές τιμές.

Η προεπιλεγμένη τιμή object-positionείναι 50% 50%όταν χρησιμοποιείτε την object-fitιδιότητα σε μια εικόνα, έτσι ώστε από προεπιλογή όλες οι εικόνες να τοποθετούνται στο κέντρο του πλαισίου περιεχομένου τους, όπως:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Διαδήλωση

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

Δείτε τη θέση του Pen Object από τον Robin Rendle (@robinrendle) στο CodePen.