Elastyczne obrazy w CSS

Elastyczne obrazy w CSS

Elastyczne obrazy to grafiki, których rozmiar dostosowuje się do dostępnej przestrzeni na stronie. Jest to jedna z podstawowych technik tworzenia stron responsywnych.

Na różnych urządzeniach ekran ma inną szerokość. Obraz ustawiony na stałe, np. width: 800px, może dobrze wyglądać na komputerze, ale na telefonie może wyjść poza ekran. Dlatego w responsywnym projektowaniu często stosuje się wartości procentowe.

Typowe rozwiązanie

img {
  max-width: 100%;
  height: auto;
}

Ten zapis oznacza, że obraz nie będzie szerszy niż jego kontener. Właściwość height: auto zachowuje proporcje grafiki, dzięki czemu obraz nie zostanie zniekształcony.

Szerokość w procentach

.obrazek {
  width: 50%;
}

Obraz zajmie połowę szerokości elementu nadrzędnego. Jeśli kontener się zmniejszy, obraz również się zmniejszy.

Dlaczego nie tylko piksele?

Piksele są jednostką bezwzględną. Ustawienie obrazu wyłącznie w pikselach może spowodować problemy na małych ekranach. Procenty są bardziej elastyczne, ponieważ zależą od rozmiaru kontenera.

Znaczenie egzaminacyjne

Jeżeli pytanie dotyczy dostosowania strony internetowej do różnych urządzeń, poprawnym kierunkiem jest stosowanie elastycznych wymiarów, np. szerokości obrazów w procentach. Układ oparty wyłącznie na tabelach lub pikselach nie jest zgodny z zasadami responsywności.