Dopasowywanie obrazka do rozmiaru obszaru roboczego CSS3 – object-fit

Czas czytania: 2 minut

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.

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

ChromeOperaFirefoxIEEdgeSafari
3110.6*36NIE1610

Mobile / Tablet

iOS
Safari
Opera
Mobile
Opera
Mini
AndroidAndroid
Chrome
Android
Firefox
10.0-10.211*TAK4.4.3-4.4.45954

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/