Vlastnost přizpůsobení objektu CSS

Obsah

    Zobrazit obsah

Vlastnost CSS object-fit se používá k určení způsobu Velikost <img> nebo <video> by měla být změněna tak, aby se vešla do kontejneru.

Vlastnost přizpůsobení objektu CSS

Vlastnost CSS object-fit se používá k určení, jak má <img> nebo <video> změnit velikost, aby se vešla do kontejneru.

Tato vlastnost říká obsahu, aby naplnil kontejner různými způsoby; jako „zachovat ten poměr stran“ nebo „roztáhnout a zabrat tolik místa jako možný".

Podívejte se na následující obrázek z Paříže. Tento obrázek je 400 pixelů široký a 300 pixelů vysoký:

Paris

Pokud však nastylujeme obrázek výše tak, aby měl poloviční šířku (200 pixelů) a stejnou výšku (300 pixelů), bude vypadat takto:

Paris

Příklad

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

Zkuste to sami →

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

Vidíme, že se obrázek stlačuje, aby se vešel do kontejneru 200x300 pixelů (jeho původní poměr stran je zničen).

Zde přichází vlastnost object-fit in. Vlastnost object-fit může mít jednu z následující hodnoty:

  • výplň - Toto je výchozí nastavení. Velikost obrázku se změní tak, aby vyplnil daný rozměr. V případě potřeby bude obrázek roztažen nebo zmáčknut, aby se vešel

  • contain - Obrázek zachová svůj poměr stran, ale jeho velikost se vejde do daného rozměru

  • obálka - Obrázek si zachová svůj poměr stran a vyplňuje daný rozměr. Obrázek bude oříznut tak, aby se vešel

  • žádné - Velikost obrázku není změněna

  • zmenšení - obrázek je zmenšeno na nejmenší verzi none nebo obsahovat

Použití objektu: kryt;

Pokud použijeme object-fit: cover;, obrázek si zachová poměr stran a vyplňuje daný rozměr. Obrázek bude oříznut, aby se vešel:

Paris

Příklad

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

Zkuste to sami →

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

Použití object-fit: include;

Pokud použijeme object-fit: include;, obrázek si zachová poměr stran, ale jeho velikost se vejde do daného rozměru:

Paris

Příklad

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

Zkuste to sami →

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

Použití object-fit: fill;

Pokud použijeme object-fit: fill;, velikost obrázku se změní tak, aby vyplnil daný rozměr. V případě potřeby bude obrázek roztažen nebo zmáčknut, aby se vešel:

Paris

Příklad

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

Zkuste to sami →

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

Použití objektového přizpůsobení: žádné;

Pokud použijeme object-fit: none;, velikost obrázku se nezmění:

Paris

Příklad

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

Zkuste to sami →

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

Použití objektového přizpůsobení: zmenšení;

Pokud použijeme object-fit: scale-down; obrázek se zmenší na nejmenší verzi none nebo obsahovat:

Paris

Příklad

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

Zkuste to sami →

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

Další příklad

Zde máme dva obrázky a chceme, aby vyplnily šířku 50 % okna prohlížeče a 100 % výšky.

V následujícím příkladu NEPOUŽÍVÁME objekt-fit, takže když změníme velikost okna prohlížeče, poměr stran obrázků bude zničen:

Příklad

Norway Paris

Zkuste to sami →

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

V dalším příkladu používáme object-fit: cover;, takže když změníme velikost okna prohlížeče, poměr stran obrázků zůstane zachován:

Příklad

Norway Paris

Zkuste to sami →

<!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 Další příklady

Následující příklad ukazuje všechny možné hodnoty vlastnosti object-fit v jednom příkladu:

Příklad

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

Zkuste to sami →

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

Vlastnosti CSS Object-*

V následující tabulce jsou uvedeny vlastnosti CSS object-*:

object-fit

Určuje, jak má být velikost <img> nebo <video> změněna, aby se vešla do kontejneru

object-position

Určuje, jak má být <img> nebo <video> umístěn s x/y souřadnice uvnitř „vlastního obsahového pole“