Szerokość obrazka w HTML

Domyślnie obrazki są wyświetlane w swojej rzeczywistej wielkości. Na przykład, ten obrazek z uśmieszkiem, który wyświetlaliśmy powyżej, ma rzeczywisty rozmiar 130 na 130 pikseli i taki sam rozmiar obrazka widzimy w przeglądarce.

W razie potrzeby można zmienić rozmiar obrazka, ustawiając mu szerokość. Robi się to za pomocą atrybutu width.

Sprawdźmy dla przykładu ustawmy naszemu obrazkowi szerokość 100 pikseli. W tym celu wartością atrybutu width wskażmy liczbę 100, w ten sposób:

htmlwidth="100"

Jakiego rozmiaru będzie obrazek na ekranie? Można by pomyśleć, że następujący: szerokość 100 pikseli, jak ustawiliśmy, i rzeczywista wysokość 130, ponieważ jej nie ustawiliśmy. W rzeczywistości, tak nie będzie.

Szerokość rzeczywiście będzie wynosić 100 pikseli, a wysokość dostosuje się tak, aby proporcje obrazka nie zostały zniekształcone, czyli również stanie się 100 pikseli.

Sprawdźmy i przekonajmy się o tym:

html<img src="smile.png" width="100">

Результат: