Object-fit - skalowanie obrazka

pytanie zadane 8 stycznia 2021 w HTML i CSS przez Robson04 Początkujący (260 p.)
zamknięte 9 stycznia 2021 przez Robson04

Cześć, mam problem z funkcją object-fit w CSS. Chcę, aby obrazek skalował się do diva mającego width: 300px i height: 200px i używam parametru cover. Problem w tym, że chce przeskalować bardzo dużo elementów, ponieważ takich divów z obrazkami jest mnóstwo na mojej stronie. Problemem jest zacinanie i długie ładowanie strony. Zastosowanie funkcji object-fit z parametrem cover w klasie diva, który jest używany wielokrotnie na mojej stronie odmawia płynnego korzystania ze strony.
Czego to może być powód, zbyt wiele obrazków z wysoką rozdzielczością i skalowanie trwa tak długo?

komentarz zamknięcia: rozwiązane

1 odpowiedź

odpowiedź 8 stycznia 2021 przez SzkolnyAdmin Szeryf (86,360 p.)
wybrane 9 stycznia 2021 przez Robson04

Najlepsza

Obrazki na stronie będą miały stałe wymiary czy też będą ulegać skalowaniu podczas działania strony? W pierwszym przypadku IMO lepiej samemu je przeskalować i podesłać przeglądarce "gotowca" niż liczyć na nią.

komentarz 8 stycznia 2021 przez Robson04 Początkujący (260 p.)

Div nie bedzie ulegać skalowaniu podczas działania strony. Najlepiej, aby obrazek był pełnego rozmiaru rozdzielczości, ponieważ po kliknięciu na diva otwiera się lightbox z jego podglądem. Również mogę wykorzystać dwa obrazki do mojego projektu. Jeden wyświetlający się w divie (przeskalowany np. w gimie) a drugi z oryginalną rozdzielczością do wyświetlenia lightboxu. Ale czy warto? Czasochłonna praca, a chodzi o wygodę i skorzystanie z możliwości CSS, prawda? Jakieś pomysły?

komentarz 8 stycznia 2021 przez SzkolnyAdmin Szeryf (86,360 p.)

Skalowanie możesz zautomatyzować, np. IrfanView ma opcję wsadowego przetwarzania obrazów, zatem wygenerowanie miniatur to nie problem (a i ich jakość nie musi być oszałamiająca). Jak sam zauważyłeś, przeglądarka "dławi" się pracą nad skalowaniem obrazów. A propos. Jakie są na twojej stronie typowe wielkości i wagi obrazów w pełnych wymiarach i jaka jest ich rozdzielczość (dpi)? Może tu trzeba poszukać optymalizacji. Zauważ jeszcze, ze użytkownik strony musi te obrazy ściągnąć.

komentarz 9 stycznia 2021 przez Robson04 Początkujący (260 p.)

Dzięki za naprostowanie mnie. Generalnie problem wydaje się być rozwiązany, obmyślałem trochę inny sposób. Wszystkie obrazy skompresowałem - tak, aby użytkownik strony nie musiał czekać długo na załadowanie ich. Obrazy, które wymagały skalowania i proporcjonalnie źle wyglądały przyklejone do diva zastosowałem object-fit. W wyniku czego oszczędziłem skalowania obrazów, które wyglądały kontem oka w porządku (jak pisałem u góry, div nie podlega responsywności). Temat zamykam, problem rozwiązany.