Як в html зменшити картинку


 

У мові розмітки гіпертексту (HTML) для виведення зображення на сторінку використовується спеціальна команда — «тег». Цей тег позначається як img і містить набір змінних — «атрибутів». За допомогою атрибутів можна визначити всі аспекти відображення картинки в сторінці гіпертексту, включаючи і її розміри. Однак це не єдиний спосіб вирішення завдання — зменшити розмір зображення можна і з використанням каскадних таблиць стилів (CSS).



Інструкція

  1. Помістіть в тег, що відповідає за виведення потрібного зображення, атрибути height і width. Першому з них привласніть розмір картинки по вертикалі, а другому — по горизонталі. Обидва числа задавайте в пікселах, але позначення одиниць — px — вказувати тут немає необхідності. Обчислюючи потрібні значення для цих атрибутів, зверніть увагу на дотримання пропорцій зменшення картинки, інакше вона буде відображатися у спотвореному вигляді. Наприклад, помістити в сторінку зменшену удвічі картинку з файлу з назвою SomePic.jpg, вихідні розміри якої становлять 500 на 300 пікселів, тег можна такою командою:

  2. Можна задати пропорційне зменшення початкових розмірів зображення у відсотках. Для цього використовуйте тільки атрибут height, не вказуючи width, а після вказівки визначального розмір числа додавайте знак відсотків. Наприклад, добитися того ж ефекту, що і в прикладі з попереднього кроку, можна тегом, записаним в такому вигляді:

  3. Якщо ви хочете задати зменшення зображення за допомогою опису стилів, використовуйте те ж ім’я тега — img — і атрибутів — width і height. В цьому випадку одиниці виміру — px, pt або% — треба вказувати завжди. Щоб задати зменшення вдвічі розмірів абсолютно всіх картинок сторінки помістіть в блок опису стилів такий запис:

    img {height: 50%;}

    Якщо зменшити потрібно розмір тільки одного зображення, допишіть в його тег додатковий атрибут id і надайте йому якесь унікальне для картинок цієї сторінки значення — наприклад, PicOne:

    Це ж значення додайте і в запис стилю, відокремивши його «гратами» # від найменування тега. Опис стилю повністю в цьому випадку може виглядати, наприклад, так: