dopasowanie obrazka do rozmiaru obszaru roboczego
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:
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:
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ść!
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:
Dodatkowe tagi:
Opis właściwości object-fit – jak ten efakt css działa na dopasowanie ilustracji
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…