Skalowalny obrazek na stronie internetowej

pytanie zadane 30 listopada 2021 w Hostingi, domeny, usługi przez urbix01 Gaduła (3,290 p.)

Witajcie, sprawdziłem ten temat na forum i nie widziałem jeszcze takiego wątku. Chodzi o to że na mojej stronie internetowej jest obrazek 600x150.

Na komputerze wygląda on świetnie, jednak jak odpalam stronę na telefonie to nie mieście się on na ekranie. Jak zrobić aby obrazek się "skalował" i dostosowywał do wielkości ekranu. Proszę o jakieś odpowiedzi, sugestie, źródła.

Pozdrawiam

4 odpowiedzi

odpowiedź 30 listopada 2021 przez Fiji404 Użytkownik (860 p.)

Moim pierwszym strzałem bedzie to ze nadaj mu bazowa szerokosc w procentach wtedy ten obrazek bedzie bazowal na zmniejszajacej sie szerokosci elementu nadrzednego, a jesli ci drazni to ze obrazek jest zbyt maly na urzadzeniach mobilnych albo zbyt duzy na PC to dodaj mu min-width i max-width i pobaw sie z wartosciami px

komentarz 30 listopada 2021 przez urbix01 Gaduła (3,290 p.)

dzięki za wskazówkę, na razie walczę z %. Mogę dać np: max-width: 150px; a zaraz obok width: 66%;

Czy to będzie rozumiane w taki sposób, że jeżeli jest miejsce to obrazek ma 150px a jak nie ma tyle miejsca to ma 66% maksymalnej szerokości?

komentarz 30 listopada 2021 przez Fiji404 Użytkownik (860 p.)

W sensie nie bardzo rozumiem ale to dziala tak ze jak ten obrazek ma takie wlasciwosci co podales, to zawsze bedzie zajmowal 66% szerokosci elementu nadrzednego a tym max width mu to ograniczasz, czyli zawsze jest relatywny ale w przypadku gdy nadrzedny element bylby bardzo szeroki to 66% byloby dla niego np 400px ale nie bedzie przez max-width a jak element nadrzedny jest mniejszy to wtedy nic nie ogranicza zdjecia i caly czas jest relatywny

komentarz 30 listopada 2021 przez Wiciorny Ekspert (278,710 p.)

@Fiji07, to jest problem skalowania a nie rozmiaru samego elementu.

komentarz 30 listopada 2021 przez Fiji404 Użytkownik (860 p.)

hmm, chyba nie rozumiem, musiałbym zobaczyc jakis przyklad gdzie te zdjecie sie znajduje, czy w jakims przeplywie flex bo tak to ciezko okreslic jego zachowanie nie majac nic