Dopasowywanie obrazka do rozmiaru obszaru roboczego CSS3 – object-fit

Czas czytania: < 1 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.

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

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://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