Atrybut width
Atrybut width ustawia szerokość obrazka,
który jest zdefiniowany przez znacznik
img.
Obecnie ten atrybut można
stosować tylko dla obrazków,
iframe,
video
i niektórych innych znaczników.
Dopuszcza się podawanie wartości w pikselach lub procentach. W przypadku ustawienia rozmiaru w procentach, będą one brane od szerokości elementu nadrzędnego. W przypadku ustawienia rozmiaru w pikselach, jednostki miary nie są podawane.
Jeśli dla obrazka nie ustawiono ani szerokości, ani wysokości - obrazek będzie miał swój rzeczywisty rozmiar. Jeśli ustawiono wysokość - obrazek przyjmie zadaną wysokość, a szerokość dostosuje się tak, aby jego proporcje nie zostały zniekształcone. Jeśli ustawiono tylko szerokość - analogicznie, obrazek dostosuje się po wysokości tak, aby zachować proporcje. Jeśli ustawiono zarówno szerokość, jak i wysokość - proporcje obrazka mogą zostać zniekształcone (a może i nie, jak traficie). Jeśli szerokość lub wysokość (lub obie razem) są większe od rzeczywistych - obrazek powiększy się, ale straci na jakości.
Zaleca się ustawianie szerokości i wysokości obrazkom w atrybutach - w tym przypadku przeglądarka będzie ładować obrazy szybciej - nie ma potrzeby obliczania rozmiaru każdego obrazka po jego otrzymaniu.
Nie zaleca się zmniejszania rzeczywistych
rozmiarów obrazka bez konieczności. Na przykład,
rzeczywisty rozmiar obrazka to 1000 na 1000
pikseli, a ty ustawisz mu szerokość na 100px.
W tym przypadku obrazek na ekranie będzie wyglądał
na 100 pikseli, jednak będzie miał rozmiar
całej tysiąc i, odpowiednio, ładować się
będzie znacznie dłużej.
Przykłady działania zobacz tutaj:
znacznik img.