У мові розмітки гіпертексту (HTML) для виводу зображення на сторінку використовується спеціальна команда - "тег". Цей тег позначається як img і містить набір змінних - "атрибутів". За допомогою атрибутів можна визначити всі аспекти відображення зображення на сторінці гіпертексту, включаючи і її розміри. Однак це не єдиний спосіб вирішення завдання - зменшити розмір зображення можна і з використанням каскадних таблиць стилів (CSS).
Інструкція
1. Помістіть тег, який відповідає за виведення потрібного зображення, атрибути height і width. Першому з них присвойте розмір картинки по вертикалі, а другому - по горизонталі. Обидва числа задавайте в пікселях, але позначення одиниць - px - вказувати тут немає необхідності. Обчислюючи потрібні значення для цих атрибутів, зверніть увагу на дотримання пропорцій зменшення картинки, інакше вона буде відображатися у спотвореному вигляді. Наприклад, помістити в сторінку зменшену вдвічі картинку з файлу з назвою SomePic.jpg, вихідні розміри якої становлять 500 на 300 піксел, тег можна такою командою:<img src="/"SomePic.jpg"" height=""150"" width=""250"" />
2. Ви можете встановити пропорційне зменшення вихідних розмірів зображення у відсотках. Для цього використовуйте лише атрибут height, не вказуючи width, а після визначення визначального розміру числа додавайте знак відсотків. Наприклад, досягти того ж ефекту, що і в прикладі з попереднього кроку, можна тегом, записаним у такому вигляді:<img src="/"SomePic.jpg"" height=""50%"" />
3. Якщо ви бажаєте встановити зменшення зображення за допомогою опису стилів, використовуйте ту саму назву теґу - img - і атрибутів - width і height. У цьому випадку одиниці вимірювання - px, pt або% - треба вказувати завжди. Щоб задати зменшення вдвічі розмірів абсолютно всіх картинок сторінки, помістіть у блок опису стилів такий запис:img {height: 50%;} Якщо ви бажаєте зменшити розмір лише одного зображення, додайте до нього додатковий атрибут id і присвойте йому якесь унікальне значення для картинок цієї сторінки - наприклад, PicOne:< img src = "" SomePic.jpg "" id = "" PicOne ""/> Це ж значення додайте і в запис стилю, відокремивши його" решіткою "# від найменування тега. Опис стилю повністю в цьому випадку може виглядати, наприклад, так:<style type=""text/css"">img#OnePic{height: 50%;}