Ιδιότητα προσαρμογής αντικειμένου CSS

Πίνακας περιεχομένων

Η ιδιότητα CSS object-fit χρησιμοποιείται για τον καθορισμό του τρόπου Το μέγεθος <img> ή <video> πρέπει να αλλάξει ώστε να ταιριάζει στο κοντέινερ του.

Η ιδιότητα προσαρμογής αντικειμένου CSS

Η ιδιότητα CSS object-fit χρησιμοποιείται για να προσδιορίσει πώς ένα <img> ή <video> θα πρέπει να αλλάξει μέγεθος ώστε να ταιριάζει στο δοχείο του.

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

Δείτε την παρακάτω εικόνα από το Παρίσι. Αυτή η εικόνα έχει πλάτος 400 pixel και ύψος 300 pixel:

Ωστόσο, εάν διαμορφώσουμε την παραπάνω εικόνα ώστε να είναι το μισό της πλάτος (200 pixel) και το ίδιο ύψος (300 pixel), θα μοιάζει με αυτό:

Παράδειγμα

img {
  width: 200px;
  height: 
  300px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width:200px;
  height:300px;
}
</style>
</head>
<body>

<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Βλέπουμε ότι η εικόνα συμπιέζεται για να χωρέσει στο κοντέινερ των 200x300 pixel (η αρχική του αναλογία διαστάσεων καταστρέφεται).

Εδώ εμφανίζεται η ιδιότητα object-fit in. Η ιδιότητα object-fit μπορεί να λάβει ένα από τα οι ακόλουθες τιμές:

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

Χρήση αντικειμένου: κάλυμμα;

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

Παράδειγμα

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>
</head>
<body>

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Χρήση αντικειμένου προσαρμογής: περιέχει;

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

Παράδειγμα

img {
  width: 200px;
  height: 
  300px;
  object-fit: contain;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}
</style>
</head>
<body>

<h2>Using object-fit: contain</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Χρήση αντικειμένου προσαρμογής: γέμισμα;

Αν χρησιμοποιήσουμε object-fit: fill; το μέγεθος της εικόνας αλλάζει για να γεμίσει τη δεδομένη διάσταση. Εάν είναι απαραίτητο, η εικόνα θα τεντωθεί ή θα συμπιεστεί για να ταιριάζει:

Παράδειγμα

img {
  width: 200px;
  height: 
  300px;
  object-fit: fill;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: fill;
}
</style>
</head>
<body>

<h2>Using object-fit: fill</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Χρήση αντικειμένου προσαρμογής: κανένα;

Εάν χρησιμοποιήσουμε object-fit: none; το μέγεθος της εικόνας δεν αλλάζει:

Παράδειγμα

img {
  width: 200px;
  height: 
  300px;
  object-fit: none;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: none;
}
</style>
</head>
<body>

<h2>Using object-fit: none</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Χρήση αντικειμένου προσαρμογής: μείωση κλίμακας.

Εάν χρησιμοποιήσουμε object-fit: scale-down; η εικόνα μειώνεται στη μικρότερη έκδοση του καμία ή περιέχει:

Παράδειγμα

img {
  width: 200px;
  height: 
  300px;
  object-fit: scale-down;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: scale-down;
}
</style>
</head>
<body>

<h2>Using object-fit: scale-down</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Ενα άλλο παράδειγμα

Εδώ έχουμε δύο εικόνες και θέλουμε να γεμίσουν το πλάτος του 50% του παραθύρου του προγράμματος περιήγησης και το 100% του ύψους.

Στο παρακάτω παράδειγμα ΔΕΝ χρησιμοποιούμε object-fit, επομένως όταν αλλάξουμε το μέγεθος του παραθύρου του προγράμματος περιήγησης, η αναλογία διαστάσεων των εικόνων θα καταστραφεί:

Παράδειγμα

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Not Using object-fit</h2>

<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>

<div style="width:100%;height:400px;">
  <img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
  <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>

</body>
</html>

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

Παράδειγμα

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Using object-fit</h2>

<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p>

<div style="width:100%;height:400px;">
  <img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

</body>
</html>

Προσαρμογή αντικειμένου CSS Περισσότερα παραδείγματα

Το παρακάτω παράδειγμα δείχνει όλες τις πιθανές τιμές της ιδιότητας object-fit σε ένα παράδειγμα:

Παράδειγμα

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>

<h1>The object-fit Property</h1>

<h2>No object-fit:</h2>
<img src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: contain:</h2>
<img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: cover:</h2>
<img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: none:</h2>
<img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

</body>
</html>

CSS Object-* Properties

Ο παρακάτω πίνακας παραθέτει τις ιδιότητες αντικειμένου CSS-*:

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