• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Skalowalny obrazek na stronie internetowej

VPS Starter Arubacloud
+1 głos
315 wizyt
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

+1 głos
odpowiedź 30 listopada 2021 przez Fiji404 Użytkownik (800 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 (800 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 (269,120 p.)

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

komentarz 30 listopada 2021 przez Fiji404 Użytkownik (800 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
komentarz 30 listopada 2021 przez Wiciorny Ekspert (269,120 p.)
zacznij od pojęcia responsywności i implementacji tego
komentarz 30 listopada 2021 przez Fiji404 Użytkownik (800 p.)
Wiem co oznacza pojecie responsywnosc i sa rozne sposoby na jej otrzmanie tylko nie zrozumialem skalowanie a sam rozmiar elementu
+1 głos
odpowiedź 30 listopada 2021 przez qax Dyskutant (8,060 p.)
edycja 30 listopada 2021 przez qax

Od siebie mogę polecić jeszcze swój artykuł:

http://www.wlasocha.pl/blog/responsywne-obrazy-w-html

EDIT:

Zanim zaczniesz eksperymentować z responsywanością na urządzeniach mobilnych upewnij się, że w sekcji <head> masz następującą linię:

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

 

+1 głos
odpowiedź 30 listopada 2021 przez JakSky Stary wyjadacz (14,770 p.)

W najprostszej formie:

 { width: 100%; }

Gdy obraz będzie miał możliwość to wyświetla się w pełnym rozmiarze, w i innym przypadku będzie się dopasowywał do mniejszej przestrzeni.

0 głosów
odpowiedź 30 listopada 2021 przez Wiciorny Ekspert (269,120 p.)

Dostosowanie musi być do różnych urządzeń, jeśli nie wykorzystujesz boostrapa i skalowania np grid/flex z wykorzystaniem kolumn to pozostaje implementacja media queries w CSS , czyli zachowania elementów w zależności od rozdzielczości ekranu urządzenia 
 

Ci https://www.artax.krakow.pl/mediaqueries.php

https://developer.mozilla.org/pl/docs/Web/CSS/@media

Podobne pytania

0 głosów
1 odpowiedź 419 wizyt
0 głosów
2 odpowiedzi 163 wizyt
0 głosów
2 odpowiedzi 181 wizyt
pytanie zadane 21 września 2022 w HTML i CSS przez domelcio Użytkownik (960 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...