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.
Co znajdziesz w tym wpisie
Jak ciała object-fit?
Zapewne brzmi to nieco dziwnie! W dużym skrócie chodzi jednak o sposób w jaki wyświetlimy obiekty o rzeczywistych wymiarach innych niż ich kontener. W przypadku np. grafiki chodzi nam o sytuacje gdy jest ona zniekształcona. Jej szerokość lub wysokość jest za duża, za mała w stosunku do realnych wymiarów.
W efekcie wygląda to dość nie estetycznie. Słyszałam nawet o przypadkach używania tej własności do dostosowywaniu obrazów na stronach RWD. Osobiście nigdy się z czymś takim nie spotkałam.
Jakie ustawienia ma object-fit?
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.0
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://www.aurainweb.pl/2017/09/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
https://www.aurainweb.pl/2017/09/pozycjonowanie-obrazka-z-css-object-position/
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ą.