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

img responsive

VPS Starter Arubacloud
0 głosów
261 wizyt
pytanie zadane 13 października 2021 w HTML i CSS przez ferdynand Obywatel (1,250 p.)
Siema,

Powiedzcie mi prosze, czy da sie powiekszyc wysokosc zdjecia tak zeby ladnie wyglądało na mobile,ale dalej bylo responsywne, bo juz troche przy tym siedze i jakos nie jestem w stanie tego zrobić ? Czy to jest zależne od zdjecia ??

z góry dzieki za pomoc, pozdrawiam :)

2 odpowiedzi

0 głosów
odpowiedź 13 października 2021 przez qax Dyskutant (8,060 p.)
wybrane 14 października 2021 przez ferdynand
 
Najlepsza

Wystarczy, że w stylu CSS podasz szerokość width lub max-width na 100%, aby zdjęcie dopasowało się do szerokości swojego kontenera-rodzica:

div {
   width: 600px;
   height: 250px;
}

div img {
   max-width: 100%; /* lub po prostu width */
   height: auto;
}

 

komentarz 14 października 2021 przez qax Dyskutant (8,060 p.)

Dla powiększenia swojej wiedzy o responsywanych obrazach dodatkowo zapraszam wszystkich do zapoznania się z moim artykułem na moim blogu:

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

komentarz 14 października 2021 przez ferdynand Obywatel (1,250 p.)
przywrócone 14 października 2021 przez ferdynand
Jeżeli mam zdjęcie o wielkości 4320x3024.

To zmieniam jego max-wielkość na 1920x1080 w jakimś programie i pozniej tworzę 3 obrazki każde o innej wielkości, aby ładnie dopasowalo się do ekranu, tylko pytanie, jaka wielkość dać tym obrazkom ???

Bo jak piszesz na swoim blogu, grafiki trzeba przygotować więc od czego to zależy jaką mają mieć wielkosc na sztywno?

Ma być 500, 1000, 1500
komentarz 14 października 2021 przez qax Dyskutant (8,060 p.)
Zazwyczaj umieszcza się grafiki o wymiarach odpowiadającym rozdzielczości ekranu urządzenia, lecz ja polecam dać odrobinę większe, gdyż niektórzy użytkownicy powiększają stronę i może dojść do efektu "rozmycia" (nie ukrywajmy, że niektórzy ludzie mają monitory 4K, ale też niektórzy muszą płacić za transfer użytego internetu oglądając stronę na małych ekranach telefonów). Powodzenia!
komentarz 14 października 2021 przez ferdynand Obywatel (1,250 p.)
Dzięki, pozdrawiam:)
+1 głos
odpowiedź 14 października 2021 przez SzkolnyAdmin Szeryf (86,280 p.)

Do odpowiedzi qax'a dodam, że max-width: 100% apobiegnie powiększeniu obrazka poza jego naturalny rozmiar (samo width: 100% nie). Tu masz ciekawy artykuł na ten temat: https://www.w3docs.com/snippets/css/how-to-resize-images-proportionally-scaled-using-css-for-responsive-web-design.html#example-of-resizing-an-image-proportionally-with-the-width-and-height-properties-10

Podobne pytania

0 głosów
1 odpowiedź 537 wizyt
pytanie zadane 30 marca 2019 w HTML i CSS przez JakuBB Nowicjusz (220 p.)
0 głosów
1 odpowiedź 531 wizyt
pytanie zadane 18 lipca 2018 w HTML i CSS przez Michał Rupiński Początkujący (270 p.)
0 głosów
1 odpowiedź 207 wizyt
pytanie zadane 4 grudnia 2017 w HTML i CSS przez Borówa Dyskutant (8,370 p.)

92,453 zapytań

141,262 odpowiedzi

319,085 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!

...