img responsive

Question

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 :)

Answer 1

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;
}

 

Comments

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

---

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

---

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!

---

Dzięki, pozdrawiam:)

Answer 2

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