Z pomocą właściwości object-fit określamy w jaki sposób interesujący nas element HTML (np. obrazek) będzie wypełnić dany obszar na stronie internetowej.
Właściwość ta ma wpływ między innymi na takie elementy HTML jak:
- img, (obraz, grafika)
- embed, (kontener dla zasobu)
- object
- lub video.
Właściwość ta ma wpływ między innymi na takie elementy HTML jak:
Właściwość ta ma wpływ między innymi na takie elementy HTML jak:
Właściwość ta ma wpływ między innymi na takie elementy HTML jak:
Właściwość ta ma wpływ między innymi na takie elementy HTML jak:
Właściwość object-fit posiada następujące własności:
- fill – domyśle ustawienie,
- contain – dopasowuje do szerokości i wysokości
- cover – ustawia obrazek na całą szerokość i wysokość nie zniekształcając obiektu
- none – brak efektu – normalny, naturalny obrazek
- scale-down – skaluje obrazek biorąc pod uwagę jego naturalne rozmiary i dopasowuje bez zniekształcania
Jak działa właściwość object-fit?
Działanie możecie sprawdzić w poniższym „generatorku”
See the Pen object-fit generator by Aura (@Julka85) on CodePen.
Trochę objaśnień do generatora:
W powyższym generatorze mamy tylko 1 zdjęcie. Wybierając opcję zmieniamy ustawienia object-fit zgodnie z opisem właściwości. Kod CSS ustawienia wyświetla się poniżej obrazka.
Wymiary obrazka są zniekształcone. W rzeczywistości jest on dużo szerszy. Dlatego też wygląda nieco dziwnie. Nie jest to błąd, ale zamierzony zabieg dzięki czemu można przetestować właściwość!
Jakie przeglądarki obsługują object-fit
Powyższa właściwość jest obsługiwana przez większość nowszych przeglądarek. Wyjątek jak zwykle stanowi IE i Edge czyli domyśle przeglądarki na systemy Windows.
Desktop
| Chrome | Opera | Firefox | IE | Edge | Safari |
|---|---|---|---|---|---|
| 31 | 10.6* | 36 | NIE | 16 | 10 |
Mobile / Tablet
| iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
|---|---|---|---|---|---|
| 10.0-10.2 | 11* | TAK | 4.4.3-4.4.4 | 59 | 54 |
https://aurainweb.pl/pozycjonowanie-obrazka-z-css-object-position/
Źródła:
- https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
- https://css-tricks.com/almanac/properties/o/object-fit/
Dodatkowe tagi:
Opis właściwości object-fit – jak ten efakt css działa na dopasowanie ilustracji
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.