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

  • προηγούμενη σελίδα object-fit
  • επόμενη σελίδα offset

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

Η ιδιότητα object-position μαζί με την object-fit καθορίζει πώς θα χρησιμοποιηθούν οι συντεταγμένες x/y για το <img> ή <video> στο "το δικό τους περιβάλλον περιεχομένου".

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

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

Εγχειρίδιο αναφοράς CSS:CSS object-position

Εγχειρίδιο αναφοράς HTML DOM:Ιδιότητα objectPosition

Παράδειγμα

Ευθυγράμμιση του μεγέθους της εικόνας ώστε να ταιριάζει στο περιβάλλον του περιεχομένου της και μετακίνηση της εικόνας από το αριστερό άκρο 5px και από την κορυφή 10%:

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px solid red;
}

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

Γλώσσα σύνταξης CSS

object-position: position|initial|inherit;

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

Τιμή Περιγραφή
position

Ορίζει τη θέση της εικόνας ή του βίντεο στο περιβάλλον του περιεχομένου του.

Η πρώτη τιμή ελέγχει τον άξονα x, η δεύτερη τιμή ελέγχει τον άξονα y.

Μπορεί να είναι αλφαριθμητικό (αριστερά, κέντρο ή δεξιά) ή αριθμητικό (με px ή %). Είναι επιτρεπόμενο το πρόσθετο.
initial Θέστε αυτή την ιδιότητα στη προεπιλεγμένη της τιμή. Δείτε: initial.
inherit Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο του. Δείτε: inherit.

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

Προεπιλεγμένη τιμή: 50% 50%
Κληρονομικότητα: ναι
Δημιουργία αニμασίας: Υποστηρίζεται. Δείτε:Αιχμές σχετικές με την αニμασία.
Έκδοση: CSS3
Γλώσσα σύνταξης JavaScript: object.style.objectPosition="0 10%"

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

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

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0
  • προηγούμενη σελίδα object-fit
  • επόμενη σελίδα offset