CSS Właściwość dopasowania obiektu
Właściwość CSS object-fitsłuży do określenia, w jaki sposób należy zmienić rozmiar <img> lub <video>, aby pasował do jego kontenera.
Właściwość dopasowania obiektów CSS
Właściwość CSS object-fitsłuży do określenia, w jaki sposób należy zmienić rozmiar <img> lub <video>, aby pasował do jego kontenera.
Ta właściwość mówi zawartości, aby wypełniła kontener na różne sposoby; na przykład „zachowaj ten współczynnik kształtu” lub „rozciągnij i zajmij jak najwięcej miejsca”.
Spójrz na poniższe zdjęcie z Paryża. Ten obraz ma 400 pikseli szerokości i 300 pikseli wysokości:
Jeśli jednak stylizujemy powyższy obrazek na połowę jego szerokości (200 pikseli) i taką samą wysokość (300 pikseli), będzie to wyglądało tak:
Przykład
img {
width: 200px;
height:
300px;
}
Widzimy, że obraz jest ściśnięty, aby zmieścił się w pojemniku 200x300 pikseli (jego oryginalne proporcje są zniszczone).
Tutaj pojawia się object-fitwłaściwość. object-fitWłaściwość może przyjmować jedną z następujących wartości:
fill- To jest domyślne. Obraz jest zmieniany w celu wypełnienia podanego wymiaru. W razie potrzeby obraz zostanie rozciągnięty lub ściśnięty w celu dopasowaniacontain- Obraz zachowuje swoje proporcje, ale jest zmieniany w celu dopasowania do danego wymiarucover- Obraz zachowuje swoje proporcje i wypełnia dany wymiar. Obraz zostanie przycięty, aby dopasowaćnone- Obraz nie jest zmienianyscale-down- obraz jest pomniejszony do najmniejszej wersjinoneorcontain
Korzystanie z dopasowania obiektu: okładka;
Jeśli użyjemy object-fit: cover;obrazka zachowuje swoje proporcje i wypełnia podany wymiar. Obraz zostanie przycięty, aby dopasować:
Przykład
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Korzystanie z dopasowania obiektu: zawiera;
Jeśli użyjemy object-fit: contain;, obraz zachowuje swoje proporcje, ale jest zmieniany tak, aby pasował do podanego wymiaru:
Przykład
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Korzystanie z dopasowania obiektu: wypełnienie;
Jeśli użyjemy object-fit: fill;obrazek zostanie przeskalowany, aby wypełnić podany wymiar. W razie potrzeby obraz zostanie rozciągnięty lub ściśnięty, aby dopasować:
Przykład
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Korzystanie z dopasowania obiektu: brak;
Jeśli użyjemy object-fit: none;obrazu nie jest zmieniany:
Przykład
img {
width: 200px;
height:
300px;
object-fit: none;
}
Korzystanie z dopasowania obiektu: zmniejszanie skali;
Jeśli użyjemy object-fit: scale-down;obrazek jest przeskalowany do najmniejszej wersji nonelub
contain:
Przykład
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Inny przykład
Tutaj mamy dwa obrazy i chcemy, aby wypełniły szerokość 50% okna przeglądarki i 100% wysokości.
W poniższym przykładzie NIE używamy object-fit, więc kiedy zmienimy rozmiar okna przeglądarki, proporcje obrazów zostaną zniszczone:
Przykład
W następnym przykładzie używamy object-fit: cover;, więc kiedy zmieniamy rozmiar okna przeglądarki, proporcje obrazów są zachowywane:
Przykład
Dopasowanie obiektów CSS Więcej przykładów
Poniższy przykład ilustruje wszystkie możliwe wartości object-fitwłaściwości w jednym przykładzie:
Przykład
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS Object-* Właściwości
Poniższa tabela zawiera listę właściwości CSS object-*:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |