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.

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/