Тег img

Тег img креира слику. Пут до слике се наводи у атрибуту src. Не захтева затварајући тег.

Атрибути

Атрибут	Опис
src	Задаје пут до слике. Обавезан атрибут.
alt	Алтернативни текст који ће бити приказан уместо слике, ако она није пронађена (на пример, ако је пут до ње погрешно наведен). Обавезан атрибут. У његовом одсуству ће се жалити валидатор (програм који проверава исправност HTML или CSS).
width	Ширина слике, у пикселима (у том случају јединице мере се не наводе) или процентима од родитеља слике.
height	Висина слике, у пикселима (у том случају јединице мере се не наводе) или процентима од родитеља слике.

Нијансе

Ако за слику није задата ни ширина, ни висина - слика ће имати своју стварну димензију. Ако је задата висина - слика ће постати задате висине, а по ширини ће се прилагодити тако да њени пропорције не буду изобличени.

Ако је задата само ширина - слично, слика ће се прилагодити по висини тако да задржи пропорције.

Ако су задати и ширина, и висина - пропорције слике могу бити изобличене (а можда и не, како погодите). Ако су ширина или висина (или оба заједно) већи од стварних - слика ће се увећати, али ће изгубити на квалитету.

Препоручује се да се ширина и висина сликама задају у атрибутима (а не преко CSS-а) - у том случају ће прегледач брже учитавати слике - нема му потребе да израчунава димензију сваке слике након њеног добијања.

Не препоручује се смањивање стварних димензија слике без потребе. На пример, стварна димензија слике је 1000 на 1000 пиксела, а ви ћете јој задати ширину од 100px. У том случају ће слика на екрану изгледати на 100 пиксела, али ће имати величину за читаву хиљаду и, самим тим, учитавати се много спорије.

Пример

Хајде да на сајт додамо слику и не дамо атрибуте height и width. Слика ће имати своју стварну димензију:

:

Пример

Хајде да покушамо слици да додамо ширину помоћу атрибута width, висина при томе треба да се прилагоди тако да се задрже пропорције слике:

:

Пример

А сада хајде да слици додамо висину помоћу атрибута height, ширина ће се при томе прилагодити тако да се задрже пропорције слике:

:

Пример

Хајде да истовремено слици додамо и висину, и ширину. Пропорције слике при томе ће постати изобличене (не мора нужно, али у овом случају су висина и ширина одабране тако да пропорције буду изобличене):

:

Пример

Хајде да поставимо погрешан пут до слике (за једноставност оставићемо га празним). Уместо слике видећемо садржај атрибута alt (изгледа као обичан текст - али покушајте да га копирате - неће успети, вући ће се као слика):

:

Погледајте такође