Ατρ. object-position του CSS

CSS object-position χρησιμοποιείται για να καθορίσει τη θέση του <img> ή του <video> μέσα στο κουτί τους.

ιδιότητα

Ας δούμε την εικόνα από το Wuhan παρακάτω, με μέγεθος 600x400 pixel:

Wuhan

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

Wuhan

Παράδειγμα

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

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

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

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

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

Wuhan

Παράδειγμα

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

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

Εδώ, θα χρησιμοποιήσουμε object-position Χρησιμοποιήστε το attribute για να τοποθετήσετε την εικόνα, ώστε η διάσημη γωνία του Παλαιού Πυργού να βρίσκεται στο δεξί μέρος:

Wuhan

Παράδειγμα

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

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

CSS object-* attributes

Η παρακάτω τаблицή καταγράφει τα CSS object-* attributes:

Ατρ. Περιγραφή
object-fit Καθορίστε πώς θα προσαρμοστεί το μέγεθος του <img> ή του <video> για να ταιριάζει στο κουτί του.
object-position Καθορίστε πώς θα τοποθετηθεί το <img> ή το <video> μέσα στο "πηγαίο πλαίσιο" του μέσω των συντεταγμένων x/y.