В HTML розміри елементів або відстані між ними задаються в пікселах або відсотках. Пиксел — це елементарна точка на екрані монітора, є відносною одиницею виміру, її величина залежить від встановленого екранного дозволу і розміру монітора. Візьмемо, наприклад, популярне дозвіл монітора 1024х768 пікселів. Картинка з такими ж розмірами буде займати всю область екрану. Збільшивши дозвіл монітора до 1280х1024, ми, тим самим, зменшимо розміри зображення на екрані.
При використанні пікселів в якості значень пишеться тільки число без вказівки одиниць, наприклад: width="380" . У прикладі 6.2 приведено додавання зображення до заданих розмірів.
Приклад 6.2. Розміри зображення в пікселах
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> Зображення </title> </head> <body> <p> <img src="images/ figure.jpg" alt="Вінні-Пух в гостях у Кролика" width="100" height="111" hspace="4" vspace="4" border="2"> </p> </body> </html>
В даному прикладі малюнок має ширину 100 пікселів ( width="100" ), висоту 111 пікселів ( height="111" ), горизонтальний і вертикальний відступ по 4 пікселя ( hspace і vspace ) і товщину межі навколо картинки 2 пікселя ( border="2" ).
Відсотковий запис вдало доповнює пікселі, оскільки дозволяє прив'язатися до розмірів певного елемента, наприклад, вікна браузера. Так, якщо задати у картинки ширину 100%, то малюнок буде заповнювати весь вільний простір вікна по ширині. Браузер розуміє, що мова йде про відсотки, якщо після числа додається символ%, наприклад: width="40%" .
Розміри допустимо ставити тільки в цілих числах. Це правило відноситься як до пікселів, так і відсоткам.
Врахуйте, що розмір у відсотках обчислюється від розмірів батьківського елементу, іншими словами, контейнера, усередині якого розташовується елемент. Якщо батько явно не заданий, тоді за відлік приймається вікно браузера. У прикладі 6.3 наведено код веб-сторінки, в якому ширина елементів задається у відсотках.
Приклад 6.3. Розміри зображення у відсотках
<!DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> Зображення </title> </head> <body> <p> <img src="images/ figure.jpg" alt="Вінні-Пух в гостях у Кролика" width="100%"> </p> </body> </html>
В даному прикладі ширина картинки задана як 100%, при цьому висота зображення явно не задається, оскільки вона обчислюється автоматично. Вигляд сторінки при таких розмірах картинки показаний на рис. 6.3.
Зверніть увагу, що в зображенні з'являються помітні спотворення, це пов'язано зі збільшенням картинки всупереч її початкових розмірів.
Як ви розумієте, ширина вікна приймається за 100%, але її легко перевищити, причому ненароком. Зокрема, варто тільки додати в прикладі 6.3 до тегу <img> відступи по горизонталі ( hspace="10" ) і ширина зображення стане 100% + 20. Це в свою чергу призведе до появи горизонтальної смуги прокрутки. Враховуйте цей нюанс при установці розмірів елементів.