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

img responsive

0 głosów
57 wizyt
pytanie zadane 13 października w HTML i CSS przez ferdynand Użytkownik (680 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 przez qax Mądrala (6,510 p.)
wybrane 14 października 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 przez qax Mądrala (6,510 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 przez ferdynand Użytkownik (680 p.)
przywrócone 14 października 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 przez qax Mądrala (6,510 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 przez ferdynand Użytkownik (680 p.)
Dzięki, pozdrawiam:)
+1 głos
odpowiedź 14 października przez SzkolnyAdmin Maniak (62,720 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ź 318 wizyt
pytanie zadane 30 marca 2019 w HTML i CSS przez JakuBB Nowicjusz (220 p.)
0 głosów
1 odpowiedź 189 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ź 150 wizyt
pytanie zadane 4 grudnia 2017 w HTML i CSS przez Borówa Dyskutant (8,370 p.)

85,874 zapytań

134,647 odpowiedzi

298,916 komentarzy

56,742 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 1048p. - rucin93
  2. 1042p. - Whistleroosh
  3. 982p. - Mateusz Bogdan
  4. 926p. - Mikbac
  5. 912p. - nidomika
  6. 876p. - adrian17
  7. 867p. - Michal Drewniak
  8. 859p. - CC PL
  9. 854p. - Argeento
  10. 704p. - ScriptyChris
  11. 692p. - s. Dorota Kowalewska
  12. 683p. - tokox
  13. 660p. - Vinox
  14. 645p. - TheLukaszNs
  15. 628p. - WhiskeyTaster
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...