Proprietatea CSS object-position
Împreună cu proprietatea object-fit, proprietatea CSS object-position folosește coordonate x/y pentru a plasa un <img> sau <video> în interiorul containerului său.
Primește două valori: prima este pentru axa x, iar a doua pentru axa y. Sunt acceptate atât șiruri (left, center sau right), cât și numere (în px sau %), iar valorile negative funcționează și ele.
Folosind proprietatea object-position
Uneori partea vizibilă dintr-o imagine nu este cea pe care o sperai. Dacă schimbi object-position, aduci în vizor partea pe care o vrei de fapt.
Poziționează clădirea în centru
Cu object-position: 80% 100%, clădirea veche și impunătoare ajunge în centrul imaginii.
Prompt
Creează o pagină cu un container de 200x300px cu o bordură neagră solidă de 1px. Plasează o imagine în interiorul lui folosind object-fit: cover și object-position: 80% 100% pentru a focaliza pe o anumită parte a imaginii. Folosește orice URL de imagine de tip peisaj lată.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Position - Building Center</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Poziționează Turnul Eiffel în centru
Cu object-position: 15% 100%, Turnul Eiffel ajunge în centrul imaginii.
Prompt
Creează o pagină cu un container de 200x300px cu o bordură neagră solidă de 1px. Plasează o imagine în interiorul lui folosind object-fit: cover și object-position: 15% 100% pentru a focaliza pe o altă parte a imaginii. Folosește orice URL de imagine de tip peisaj lată.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Position - Eiffel Tower</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 15% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>