Как в html уменьшить картинку

размер картинки CSS


В языке разметки гипертекста (HTML) для вывода изображения на страницу используется специальная команда — «тег». Этот тег обозначается как img и содержит набор переменных — «атрибутов».

С помощью атрибутов можно определить все аспекты отображения картинки в странице гипертекста, включая и ее размеры. Однако это не единственный способ решения задачи — уменьшить размер изображения можно и с использованием каскадных таблиц стилей (CSS).

Как в html уменьшить картинку

Вопрос « Фотошоп CS3» — 1 ответ
Инструкция
1
Поместите в тег, отвечающий за вывод нужного изображения, атрибуты height и width. Первому из них присвойте размер картинки по вертикали, а второму — по горизонтали.

Оба числа задавайте в пикселах, но обозначение единиц — px — указывать здесь нет необходимости. Вычисляя нужные значения для этих атрибутов, обратите внимание на соблюдение пропорций уменьшения картинки, иначе она будет отображаться в искаженном виде.

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

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

Чтобы задать уменьшение вдвое размеров абсолютно всех картинок страницы поместите в блок описания стилей такую запись:img {height: 50%;}Если уменьшить нужно размер только одного изображения, допишите в его тег дополнительный атрибут id и присвойте ему какое-либо уникальное для картинок этой страницы значение — например, PicOne:Это же значение добавьте и в запись стиля, отделив его «решеткой» # от наименования тега. Описание стиля полностью в этом случае может выглядеть, например, так:img#OnePic{height: 50%;}

Похожие статьи:

Читайте также: