Proprietatea CSS object-fit
Când un <img> sau un <video> trebuie să încapă în containerul său, proprietatea CSS object-fit decide cum este redimensionat.
Poți alege una dintre aceste valori:
- fill — Valoarea implicită. Prin întindere sau comprimare, imaginea umple containerul, iar raportul de aspect se pierde.
- cover — Imaginea umple containerul și își păstrează raportul de aspect, iar ce depășește este tăiat dacă este necesar.
- contain — Întreaga imagine rămâne în interiorul containerului, cu raportul de aspect intact. Nu se taie nimic și poate rămâne spațiu gol.
- none — Nu are loc nicio redimensionare.
- scale-down — Imaginea este micșorată la varianta dintre
nonesaucontaincare dă versiunea mai mică.
Folosind object-fit: fill;
Cu object-fit: fill;, containerul este umplut prin întinderea sau comprimarea imaginii, iar raportul de aspect se pierde.
Exemplu
Prompt
Afișează o imagine într-un container de 200x300px cu o bordură neagră, folosind
object-fit: fill;. Imaginea trebuie să se întindă pentru a umple containerul, ignorându-și raportul de aspect.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: fill</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Using object-fit: fill</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Folosind object-fit: cover;
Cu object-fit: cover;, imaginea umple containerul la raportul său de aspect original, iar decuparea o face să încapă.
Exemplu
Prompt
Afișează o imagine într-un container de 200x300px cu o bordură neagră, folosind
object-fit: cover;. Imaginea trebuie să umple containerul păstrându-și raportul de aspect, decupând ce depășește după caz.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: cover</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Using object-fit: cover</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Folosind object-fit: contain;
Cu object-fit: contain;, nu se taie nimic: imaginea stă în interiorul containerului la raportul său de aspect original, iar zona rămasă rămâne goală.
Exemplu
Prompt
Afișează o imagine într-un container de 200x300px cu o bordură neagră, folosind
object-fit: contain;. Imaginea trebuie să se încadreze în container păstrându-și raportul de aspect, lăsând spațiu gol dacă e nevoie.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: contain</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Using object-fit: contain</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Folosind object-fit: none;
Cu object-fit: none;, imaginea își păstrează dimensiunea, fără redimensionare sau scalare.
Exemplu
Prompt
Afișează o imagine într-un container de 200x300px cu o bordură neagră, folosind
object-fit: none;. Imaginea nu trebuie redimensionată sau scalată.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: none</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: none;
}
</style>
</head>
<body>
<h2>Using object-fit: none</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Folosind object-fit: scale-down;
Cu object-fit: scale-down;, imaginea este micșorată la varianta dintre none sau contain care dă versiunea mai mică.
Exemplu
Prompt
Afișează o imagine într-un container de 200x300px cu o bordură neagră, folosind
object-fit: scale-down;. Imaginea trebuie redusă la cea mai mică versiune dintre none sau contain.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: scale-down</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Using object-fit: scale-down</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Un alt exemplu
În acest layout, două imagini ar trebui să ocupe fiecare 50% din lățimea browserului și 100% din înălțimea containerului.
Fără object-fit
Redimensionează browserul și, fără object-fit, imaginile își pierd raportul de aspect.
Prompt
Afișează două imagini una lângă cealaltă, fiecare ocupând 50% din lățimea browserului și 100% dintr-un container cu înălțimea de 400px, fără a folosi object-fit. Imaginile trebuie să apară întinse/distorsionate.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Images Without object-fit</title>
<style>
.container {
display: flex;
height: 400px;
}
.container img {
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<h2>Two Images - Without object-fit</h2>
<div class="container">
<img src="img_norway.jpg" alt="Norway">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Cu object-fit: cover
Adaugă object-fit: cover; și imaginile își păstrează raportul de aspect pe măsură ce browserul este redimensionat.
Prompt
Afișează două imagini una lângă cealaltă, fiecare ocupând 50% din lățimea browserului și 100% dintr-un container cu înălțimea de 400px, folosind
object-fit: cover; pentru a păstra raportul de aspect al ambelor imagini.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Images With object-fit: cover</title>
<style>
.container {
display: flex;
height: 400px;
}
.container img {
width: 50%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Two Images - With object-fit: cover</h2>
<div class="container">
<img src="img_norway.jpg" alt="Norway">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>