Kwalifikacja: AUD.05 - Realizacja projektów graficznych i multimedialnych

Wiele osób przy projektowaniu banerów internetowych czy reklam rozważa ustawienie parametrów takich jak max-height, background-size albo background-position, jednak to trochę mylące podejście, jeśli chodzi o kontrolę szerokości elementu. max-height pozwala ograniczyć wysokość, co jest przydatne przy pionowych layoutach lub gdy nie chcemy, żeby grafika była za wysoka, ale nie wpłynie na to, jak szeroki będzie baner czy reklama. W praktyce, jeśli ustawisz tylko max-height, szerokość reklamy może się rozjechać i nie uzyskasz żądanego efektu, zwłaszcza na szerokich ekranach lub gdy użytkownik korzysta z dużego monitora. background-size i background-position są natomiast właściwościami, które dotyczą wyłącznie tła CSS, czyli obrazka w tle, a nie rozmiaru samego kontenera. Za pomocą background-size można oczywiście skalować obrazek, np. dopasowując go do wielkości kontenera (cover, contain, procenty), ale nie kontrolujesz w ten sposób szerokości całego elementu, tylko tła – reszta treści może się rozjechać. background-position ustala, w którym miejscu wyświetli się tło w elemencie, na przykład po lewej, po prawej, wyśrodkowane, itd., ale w ogóle nie wpływa na rozmiar elementu jako takiego. Często spotykam się z sytuacją, gdzie ktoś próbuje naprawić złe skalowanie reklamy manipulując background-size, a okazuje się, że trzeba po prostu wyznaczyć max-width na kontenerze. Według standardów CSS i praktyki webowej, tylko max-width daje pewność, że żaden element nie rozrośnie się poza określoną granicę szerokości, a jednocześnie umożliwia responsywność, która w dzisiejszych czasach jest absolutnym must-have. Warto o tym pamiętać, żeby nie tracić czasu na kombinowanie z nieodpowiednimi właściwościami.