• 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
49 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 Gaduła (4,230 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 Gaduła (4,230 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 Gaduła (4,230 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 (60,320 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ź 298 wizyt
pytanie zadane 30 marca 2019 w HTML i CSS przez JakuBB Nowicjusz (220 p.)
0 głosów
1 odpowiedź 185 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ź 144 wizyt
pytanie zadane 4 grudnia 2017 w HTML i CSS przez Borówa Dyskutant (8,370 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

85,254 zapytań

134,061 odpowiedzi

297,276 komentarzy

56,338 pasjonatów

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.

...