Давайте тепер розберемося з тим, як розмістити
зображення на сторінці вашого сайту.
Для цього призначений тег <img>,
має обов'язковий атрибут src,
в якому слід ставити шлях до файлу зображення.
При цьому сам тег не вимагає тега, що закриває.
Давайте подивимося на прикладі. Нехай у кореневій
папці нашого сайту знаходиться файл smile.png
з зображенням. Давайте виведемо її на сторінку
нашого сайту:
<img src="smile.png">
:
Розмістіть на сторінці вашого сайту якусь картинку.
Ширина картинки
За промовчанням зображення відображаються своїм
реальним розміром. Наприклад, та картинка
зі смайлом, яку ми виводили вище, має
реальний розмір 130 на 130
пікселів і такий самий розмір картинки ми і
бачимо в браузері.
За бажанням можна змінити розмір картинки,
задаючи їй ширину. Це робиться за допомогою атрибуту
width
Давайте для прикладу задамо нашій картинці
ширину 100 пикселів. Для цього значення
атрибуту width вкажемо число 100,
ось так: width="100".
Якого розміру буде картинка на екрані?
Можна подумати, що така: ширина 100
пікселів, як ми поставили, і реальна висота
130, оскільки ми її не ставили. На
насправді це буде не так.
Ширина дійсно буде 100 пікселів,
а ось висота підлаштовується так, щоб пропорції
картинки не спотворилися, тобто також стане
100 пикселей.
Давайте запустимо і переконаємось у цьому:
<img src="smile.png" width="100">
:
Встановіть вашій картинці ширину в 300
пикселів.
Висота картинки
Можна замість атрибуту width написати
атрибут height - у цьому випадку вже
висота буде задана як 100 пікселів,
а ширина підлаштовується під неї так, щоб не
спотворити пропорції:
<img src="smile.png" height="100">
:
Встановіть вашій картинці висоту в 100 пікселів.
Одночасно ширина і висота
Якщо задати одночасно і ширину, і висоту,
то картинку можна спотворити. Наприклад, якщо
встановити ширину 100 пікселів, а висоту
70px, то наш смайл стане розтягнутим
по ширині:
<img src="smile.png" width="100" height="70">
:
Картинка не обов'язково спотвориться, адже ми
можемо просто задати і ширину, і висоту по
100 пікселів, у цьому випадку наша картинка
стане менше, ніж була (а була вона 130),
але пропорції її не зміняться:
<img src="smile.png" width="100" height="100">
:
Встановіть вашій картинці ширину та висоту так, щоб пропорції зображення змінилися.
Встановіть вашій картинці ширину та висоту так, щоб пропорції зображення НЕ змінилися.