Znacznik img

Znacznik img tworzy obraz. Ścieżka do obrazu jest podawana w atrybucie src. Nie wymaga znacznika zamykającego.

Atrybuty

Atrybut	Opis
src	Określa ścieżkę do obrazu. Atrybut obowiązkowy.
alt	Tekst alternatywny, który zostanie wyświetlony zamiast obrazu, jeśli nie zostanie on znaleziony (na przykład, jeśli ścieżka do niego jest nieprawidłowa). Atrybut obowiązkowy. W przypadku jego braku walidator (program sprawdzający poprawność HTML lub CSS) zgłosi błąd.
width	Szerokość obrazu w pikselach (w tym przypadku jednostki miary nie są podawane) lub w procentach względem elementu nadrzędnego obrazu.
height	Wysokość obrazu w pikselach (w tym przypadku jednostki miary nie są podawane) lub w procentach względem elementu nadrzędnego obrazu.

Niuanse

Jeśli dla obrazu nie jest ustawiona ani szerokość, ani wysokość - obraz będzie miał swój rzeczywisty rozmiar. Jeśli jest ustawiona wysokość - obraz osiągnie ustawioną wysokość, a szerokość dostosuje się tak, aby jego proporcje nie zostały zniekształcone.

Jeśli ustawiona jest tylko szerokość - analogicznie, obraz dostosuje swoją wysokość, aby zachować proporcje.

Jeśli ustawione są zarówno szerokość, jak i wysokość - proporcje obrazu mogą zostać zniekształcone (ale nie muszą, zależy to od wartości). Jeśli szerokość lub wysokość (lub obie jednocześnie) są większe niż rzeczywiste - obraz się powiększy, ale straci na jakości.

Zaleca się ustawianie szerokości i wysokości obrazów w atrybutach (a nie przez CSS) - w tym przypadku przeglądarka będzie ładować obrazy szybciej - nie musi obliczać rozmiaru każdego obrazu po jego pobraniu.

Nie zaleca się bez potrzeby zmniejszania rzeczywistych rozmiarów obrazu. Na przykład, rzeczywisty rozmiar obrazu to 1000 na 1000 pikseli, a ty ustawisz mu szerokość na 100px. W tym przypadku obraz na ekranie będzie wyglądał na 100 pikseli, jednak będzie miał rozmiar pełnych tysiąca i, odpowiednio, będzie ładować się znacznie dłużej.

Przykład

Dodajmy obraz na stronę i nie ustawiajmy atrybutów height i width. Obraz będzie miał swój rzeczywisty rozmiar:

:

Przykład

Spróbujmy dodać obrazowi szerokość za pomocą atrybutu width, wysokość przy tym powinna dostosować się tak, aby zachować proporcje obrazu:

:

Przykład

A teraz dodajmy obrazowi wysokość za pomocą atrybutu height, szerokość przy tym dostosuje się tak, aby zachować proporcje obrazu:

:

Przykład

Ustawmy jednocześnie obrazowi zarówno wysokość, jak i szerokość. Proporcje obrazu przy tym powinny zostać zniekształcone (niekoniecznie, ale w tym przypadku wysokość i szerokość są dobrane tak, aby proporcje zostały zniekształcone):

:

Przykład

Ustawmy nieprawidłową ścieżkę do obrazu dla uproszczenia pozostawmy ją pustą). Zamiast obrazu zobaczymy zawartość atrybutu alt (wydaje się, że to zwykły tekst - ale spróbujcie go skopiować - nic wam nie wyjdzie, będzie się ciągnął jak obraz):

:

Zobacz też