Aby obraz umieszczony na stronie www automatycznie dostosowywał się do rozmiaru ekranu, na którym strona jest wyświetlana, należy

Ustalenie szerokości obrazu w procentach jest kluczowym krokiem w responsywnym projektowaniu stron internetowych. Pozwala to na automatyczne dopasowanie szerokości obrazu do szerokości kontenera, w którym się znajduje, co jest istotne w przypadku różnych rozmiarów ekranów, od komputerów stacjonarnych po urządzenia mobilne. Kiedy szerokość obrazu jest zadana w procentach, np. 'width: 100%;', obraz będzie zajmował 100% szerokości swojego rodzica, co umożliwia rozciąganie lub zmniejszanie obrazu w zależności od dostępnej przestrzeni. Jest to zgodne z zasadami responsywnego web designu (RWD), które zakładają elastyczność i dostosowanie UI do różnych warunków wyświetlania. Dodatkowo, stosowanie jednostek procentowych jest praktyką zalecaną przez W3C w kontekście utrzymania proporcji i jakości obrazu na różnych urządzeniach. Warto również dodać, że w przypadku używania CSS warto określić maksymalną szerokość obrazu (max-width), aby uniknąć nadmiernego rozciągania na dużych ekranach.