CSS objektum-illesztési tulajdonság

Tartalomjegyzék

A CSS object-fit tulajdonsága annak meghatározására szolgál, Az <img> vagy a <video> méretet át kell méretezni, hogy illeszkedjen a tárolójához.

A CSS objektum-illesztési tulajdonság

A CSS object-fit tulajdonsága arra szolgál, hogy meghatározza, hogyan kell egy <img> vagy <video> át kell méretezni, hogy illeszkedjen a tartályához.

Ez a tulajdonság arra utasítja a tartalmat, hogy többféleképpen töltse ki a tartályt; mint például "megőrzi ezt a képarányt" vagy "nyújtsd fel, és annyi helyet foglalj el, amennyit lehetséges".

Nézd meg a következő képet Párizsból. Ez a kép 400 pixel széles és 300 képpont magas:

Ha azonban a fenti képet úgy alakítjuk, hogy a szélességének fele (200 pixel) és ugyanakkora magassága (300 pixel) legyen, így fog kinézni:

Példa

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

Próbálja ki Ön is →

<!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>

Látjuk, hogy a kép összenyomódik, hogy beleférjen a 200x300 pixeles tárolóba (az eredeti képarány megsemmisült).

Itt jön az object-fit tulajdonság Az object-fit tulajdonság felveheti az egyiket következő értékek:

kitöltés - Ez az alapértelmezett. A kép átméretezve kitölti a adott dimenzió. Ha szükséges, a képet megnyújtjuk vagy összenyomjuk, hogy illeszkedjen
contain - A kép megtartja a képarányát, de átméretezi, hogy beleférjen az adott méretbe
borító - A kép megőrzi a képarányát és kitölti az adott dimenziót. A kép kivágásra kerül, hogy illeszkedjen
nincs - A kép nincs átméretezve
lekicsinyítés - a kép az kicsinyítve a none vagy legkisebb verziójára tartalmaz

Tárgyillesztés használata: borító;

Ha object-fit: cover;-t használunk, a kép megtartja a képarányát és kitölti az adott dimenziót. A kép kivágásra kerül, hogy illeszkedjen:

Példa

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

Próbálja ki Ön is →

<!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 használata: tartalmazza;

Ha az object-fit: include;-t használjuk, a kép megtartja a képarányát, de átméretezi, hogy beleférjen az adott méretbe:

Példa

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

Próbálja ki Ön is →

<!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>

Objektum-illesztés használata: kitöltés;

Ha az object-fit: fill;-t használjuk, a kép átméreteződik, hogy kitöltse az adott méretet. Ha szükséges, a képet megnyújtjuk vagy összenyomjuk, hogy illeszkedjen:

Példa

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

Próbálja ki Ön is →

<!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>

Objektum-illesztés használata: nincs;

Ha az object-fit: none;-t használjuk, a kép nem lesz átméretezve:

Példa

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

Próbálja ki Ön is →

<!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>

Objektum-illesztés használata: kicsinyítés;

Ha az object-fit: scale-down;-t használjuk, a kép a none legkisebb változatára kicsinyítve lesz vagy tartalmaz:

Példa

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

Próbálja ki Ön is →

<!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>

Egy másik példa

Itt van két képünk, és azt szeretnénk, hogy azok kitöltsék a böngészőablak 50%-át és a magasság 100%-át.

A következő példában NEM használjuk az object-fit-t, így a böngészőablak átméretezésekor a képek képaránya megsemmisül:

Példa

Próbálja ki Ön is →

<!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>

A következő példában az object-fit: cover; függvényt használjuk, így a böngészőablak átméretezésekor a képek képaránya megmarad:

Példa

Próbálja ki Ön is →

<!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 objektum-illesztés További példák

A következő példa bemutatja az object-fit tulajdonság összes lehetséges értékét egy példában:

Példa

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

Próbálja ki Ön is →

<!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-objektum-* Tulajdonságok

Az alábbi táblázat felsorolja a CSS objektum* tulajdonságait:

object-fit: Meghatározza, hogy az <img> vagy <video> hogyan legyen átméretezve, hogy illeszkedjen a tárolójához
object-position: Meghatározza, hogy az <img> vagy <video> hogyan helyezkedjen el az x/y-val koordinálja a "saját tartalomdobozában"