Ιδιότητα αντικειμένου θέσης CSS

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

    Εμφάνιση πίνακα περιεχομένων

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

Η εικόνα

Δείτε την παρακάτω εικόνα από το Παρίσι, η οποία είναι 400x300 pixel:

Paris

Στη συνέχεια, χρησιμοποιούμε την ιδιότητα CSS

object-fit: cover;

για να διατηρήσετε την αναλογία διαστάσεων και να γεμίσετε τη δεδομένη διάσταση. Ωστόσο, η εικόνα θα κοπεί για να ταιριάζει, ως εξής:

Paris

Παράδειγμα

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-position.

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

Paris

Παράδειγμα

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 80% 100%;
}

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

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

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the great old building is in center:</p>

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

</body>
</html>

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

Paris

Παράδειγμα

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 15% 100%;
}

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

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

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:</p>

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

</body>
</html>

CSS Object-* Properties

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

object-fit

Καθορίζει πώς θα πρέπει να αλλάξει το μέγεθος ενός <img> ή <video> ώστε να ταιριάζει στο κοντέινερ του

object-position

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