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-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:
Jos kuitenkin muotoilemme yllä olevan kuvan puoleen sen leveydestä (200 pikseliä) ja samasta korkeudesta (300 pikseliä), se näyttää tältä:
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ää
Jos käytämme object-fit: cover;
, kuva säilyttää kuvasuhteen ja täyttää annetun ulottuvuuden. Kuva leikataan sopivaksi:
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>
Jos käytämme object-fit: include;
, kuva säilyttää kuvasuhteen, mutta sen kokoa muutetaan sopimaan annettuun mittasuhteeseen:
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>
Jos käytämme object-fit: fill;
, kuvan kokoa muutetaan täyttämään annettu mitta. Tarvittaessa kuvaa venytetään tai puristetaan sopimaan:
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>
Jos käytämme object-fit: none;
, kuvan kokoa ei muuteta:
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>
Jos käytämme object-fit: scale-down;
, kuva pienennetään none
:n pienimpään versioon. tai sisältää
:
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>
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-fit
a, joten kun muutamme selainikkunan kokoa, kuvien kuvasuhde tuhoutuu:
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:
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>
Seuraava esimerkki näyttää kaikki mahdolliset object-fit
-ominaisuuden arvot yhdessä esimerkissä:
.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>
Seuraavassa taulukossa on lueteltu CSS-objektin* ominaisuudet:
Määrittää, kuinka <img> tai <video> kokoa tulee muuttaa, jotta se mahtuu säilöön
Määrittää, kuinka <img> tai <video> sijoitetaan x/y:n kanssa koordinoi "omassa sisältölaatikossaan"