CSS-objektin sovitusominaisuus


Sisällysluettelo

    Näytä sisällysluettelo


CSS-ominaisuutta object-fit käytetään määrittämään, kuinka <img>- tai <video>-koko tulee muuttaa niin, että se mahtuu säilöön.


CSS-objektin sovitusominaisuus

CSS-ominaisuutta object-fit käytetään määrittämään, miten <img> tai <video> kokoa muutetaan sopivaksi sen säiliöön.

Tämä ominaisuus käskee sisällön täyttämään säiliön monin eri tavoin; kuten "säilytä tämä kuvasuhde" tai "venytä ja vie niin paljon tilaa kuin mahdollista".

Katso seuraava kuva Pariisista. Tämä kuva on 400 pikseliä leveä ja 300 pikseliä korkea:

Paris

Jos kuitenkin muotoilemme yllä olevan kuvan puoleen sen leveydestä (200 pikseliä) ja samasta korkeudesta (300 pikseliä), se näyttää tältä:

Paris

Esimerkki

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

Kokeile itse →

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


Näemme, että kuvaa puristetaan sopimaan 200x300 pikselin säilöön (sen alkuperäinen kuvasuhde on tuhoutunut).

Tästä tulee ominaisuus object-fit Ominaisuus object-fit voi olla jokin seuraavista seuraavat arvot:

  • täyttö - tämä on oletusarvo. Kuvan kokoa muutetaan täyttämään annettu ulottuvuus. Tarvittaessa kuvaa venytetään tai puristetaan sopivaksi

  • sisältää - kuva säilyttää kuvasuhteensa, mutta sen kokoa muutetaan sopimaan annettuun ulottuvuuteen

  • kansi - Kuva säilyttää kuvasuhteensa ja täyttää annetun ulottuvuuden. Kuva leikataan sopivaksi

  • ei mitään - Kuvan kokoa ei muuteta

  • pienennys - kuva on skaalattu pienimpään versioon ei mitään tai sisältää


Objektin sovituksen käyttäminen: kansi;

Jos käytämme object-fit: cover;, kuva säilyttää kuvasuhteen ja täyttää annetun ulottuvuuden. Kuva leikataan sopivaksi:

Paris

Esimerkki

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

Kokeile itse →

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




Objektin sovituksen käyttäminen: sisältää;

Jos käytämme object-fit: include;, kuva säilyttää kuvasuhteen, mutta sen kokoa muutetaan sopimaan annettuun mittasuhteeseen:

Paris

Esimerkki

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

Kokeile itse →

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



Objektin sovituksen käyttäminen: täytä;

Jos käytämme object-fit: fill;, kuvan kokoa muutetaan täyttämään annettu mitta. Tarvittaessa kuvaa venytetään tai puristetaan sopimaan:

Paris

Esimerkki

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

Kokeile itse →

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



Objektin sovituksen käyttäminen: ei mitään;

Jos käytämme object-fit: none;, kuvan kokoa ei muuteta:

Paris

Esimerkki

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

Kokeile itse →

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



Objektin sovituksen käyttäminen: pienennys;

Jos käytämme object-fit: scale-down;, kuva pienennetään none:n pienimpään versioon. tai sisältää:

Paris

Esimerkki

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

Kokeile itse →

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



Toinen esimerkki

Tässä meillä on kaksi kuvaa, ja haluamme niiden täyttävän 50 % selainikkunan leveydestä ja 100 % korkeudesta.

Seuraavassa esimerkissä emme käytä object-fita, joten kun muutamme selainikkunan kokoa, kuvien kuvasuhde tuhoutuu:

Esimerkki

Norway Paris

Kokeile itse →

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


Seuraavassa esimerkissä käytämme object-fit: cover;, joten kun muutamme selainikkunan kokoa, kuvien kuvasuhde säilyy:

Esimerkki

Norway Paris

Kokeile itse →

<!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-objektin sovitus Lisää esimerkkejä

Seuraava esimerkki näyttää kaikki mahdolliset object-fit-ominaisuuden arvot yhdessä esimerkissä:

Esimerkki

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

Kokeile itse →

<!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-objekti-* ominaisuudet

Seuraavassa taulukossa on lueteltu CSS-objektin* ominaisuudet:

object-fit

Määrittää, kuinka <img> tai <video> kokoa tulee muuttaa, jotta se mahtuu säilöön

object-position

Määrittää, kuinka <img> tai <video> sijoitetaan x/y:n kanssa koordinoi "omassa sisältölaatikossaan"