Własność CSS object-fit dla <img>

Kliknij na przycisk "Pokaż".

Zobaczmy co w kodzie:

• znacznik style do stylizacji (formatowania) elementów HTML za pomocą CSS
• 1 kontener (pojemnik, pudełko) div
• 4 znaczniki img z adresami grafik

W kontenerze div ustawiliśmy za pomocą stylów CSS, że jego zawarte elementy będą elastyczne (rozciągane domyślnie pionowo) z możliwym zawijaniem elementów. Umieściliśmy w nim 4 obrazy. Niestety rozciągnięte obrazy wyglądają fatalnie. Już lepiej by niekoniecznie były pokazane w całości, ale by były skalowane proporcjonalnie.

Znajdź rozwiązanie problemu dokładając w ustawieniach CSS znacznika obrazów img odpowiednią wartość własności object-fit, aby obrazki odzyskały naturalne skalowanie (domyślnie jest "fill" - wypełnij bez skalowania).