Ιδιότητα object-fit

Η ιδιότητα object-fit ορίζει την αναλογία διαστάσεων ή την κλιμάκωση στοιχείων όπως εικόνες ή βίντεο.

Σύνταξη

cssεπιλογέας {
  object-fit: fill ή contain ή cover ή none;
}

Ο πίνακας παρουσιάζει τις κύριες τιμές για την ιδιότητα object-fit:

Τιμές

Τιμή	Περιγραφή
`fill`	Κλιμάκωση του στοιχείου για να ταιριάζει στις δεδομένες διαστάσεις, ενώ οι αναλογίες του στοιχείου αγνοούνται.
`contain`	Κλιμάκωση του στοιχείου για να ταιριάζει στις δεδομένες διαστάσεις, ενώ οι αναλογίες του στοιχείου διατηρούνται.
`cover`	Οι διαστάσεις του στοιχείου αλλάζουν, για να γεμίσουν πλήρως την καθορισμένη περιοχή, ενώ οι αναλογίες του ίδιου του στοιχείου διατηρούνται.
`none`	Οι αρχικές διαστάσεις του στοιχείου διατηρούνται.

Παράδειγμα

Ας ορίσουμε στην εικόνα μας γέμισμα των καθορισμένων διαστάσεων χωρίς διατήρηση των αναλογιών:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Παράδειγμα

Και τώρα ας κάνουμε την εικόνα να γεμίσει το καθορισμένο δοχείο διατηρώντας τις αναλογίες:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Παράδειγμα

Ας γεμίσουμε με την εικόνα μας το καθορισμένο δοχείο έτσι ώστε το μέγεθος της ίδιας της εικόνας να αλλάξει, αλλά ταυτόχρονα να διατηρηθούν οι αναλογίες της:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Παράδειγμα

Ας τοποθετήσουμε απλά την εικόνα μας στο καθορισμένο δοχείο διατηρώντας τα αρχικά της μεγέθη:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Δείτε επίσης

την ιδιότητα aspect-ratio,
που ορίζει την αναλογία διαστάσεων ενός στοιχείου