У мові розмітки гіпертексту (HTML) для виведення зображення на сторінку використовується спеціальна команда - «тег». Цей тег позначається як img і містить набір змінних - «атрибутів». За допомогою атрибутів можна визначити всі аспекти відображення картинки в сторінці гіпертексту, включаючи і її розміри. Однак це не єдиний спосіб вирішення задачі - зменшити розмір зображення можна і з використанням каскадних таблиць стилів (CSS).
Інструкція
Помістіть в тег, який відповідає за виведення потрібного зображення, атрибути height і width. Першому з них надайте розмір картинки по вертикалі, а другий - по горизонталі. Обидва числа задавайте в пікселах, але позначення одиниць - px - вказувати тут немає необхідності. Обчислюючи потрібні значення для цих атрибутів, зверніть увагу на дотримання пропорцій зменшення картинки, інакше вона буде відображатися у спотвореному вигляді. Наприклад, помістити в сторінку зменшену вдвічі картинку з файлу з назвою SomePic.jpg, вихідні розміри якої становлять 500 на 300 пікселів, тег можна такою командою:
Можна задати пропорційне зменшення початкових розмірів зображення у відсотках. Для цього використовуйте тільки атрибут height, що не вказуючи width, а після вказівки визначального розмір числа додавайте знак відсотків. Наприклад, домогтися того ж ефекту, що і в прикладі з попереднього кроку, можна тегом, записаним у такому вигляді:
Якщо ви хочете задати зменшення зображення за допомогою опису стилів, використовуйте те ж ім'я тега - img - і атрибутів - width і height. У цьому випадку одиниці виміру - px, pt або% - треба вказувати завжди. Щоб задати зменшення вдвічі розмірів абсолютно всіх картинок сторінки помістіть в блок опису стилів такий запис: img {height: 50% -} Якщо зменшити потрібно розмір тільки одного зображення, допишіть в його тег додатковий атрибут id і надайте йому якесь унікальне для картинок цієї сторінки значення - наприклад, PicOne:Це ж значення додайте і в запис стилю, відокремивши його «гратами» # від найменування тега. Опис стилю повністю в цьому випадку може виглядати, наприклад, так:
Це ж значення додайте і в запис стилю, відокремивши його «гратами» # від найменування тега. Опис стилю повністю в цьому випадку може виглядати, наприклад, так: