Ιδιότητα object-fit

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

Σύνταξη

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

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

Τιμές

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Δείτε επίσης

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