Инструкция
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%;}
Источники:
- как уменьшить весь изображения