Примеры вставки и форматирования изображений

Последние изменение: 22.10.2018

Пути к изображению

Пример 1 | Относительный и абсолютный пути к изображению

Путь к изображению может быть относительный и абсолютный.

Возьмем два разных изображения, но с одинаковым названием (picture.jpg), лежащих в разных папках на ТСД. Первое в папке Images установки программы на ТСД, второе в папке Images на флеш накопителе ТСД.

Зададим относительный и абсолютные пути к изображениям.

Относительный путь к изображению
Images\picture.jpg
<img size="stretch" max>Images\picture.jpg</img>
<hr/>
Абсолютный путь к изображению
\Images\picture.jpg
<img size="stretch" max>\Images\picture.jpg</img>


Результат на терминале:

Первое изображение находилось в папке Images установки программы на ТСД (относительный путь), второе в папке Images на флеш накопителе ТСД (абсолютный путь – любое место на ТСД).

Пример 2 | Изображение задано переменной

Чтобы вставлять изображения в виде переменных сначала необходимо их создать. Переменные имеют вид {любое название}=путь к изображению.

После того, как переменная создана, можно вместо пути указывать нужную переменную.

< img size="stretch">{картинка}</img>

Вставка изображения в текст

Пример 1 | Вставка изображения в текст

Существует возможность вставлять изображения в текст. Для этого тег <img>…</img> необходимо размещать в нужном месте текста.

Изображение <img size="stretch" max>Images\picture.jpg</img> вставлено в текст.

Результат на терминале:

Пример 2| Выравнивание текста по отношению к изображению

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

<img size="stretch" align="top" max>Images\picture.jpg</img> выравнивание текста по верхней границе изображения
<img size="stretch" align="center" max>Images\picture.jpg</img> выравнивание текста по центру изображения
<img size="stretch" align="bottom" max>Images\picture.jpg</img> выравнивание текста по нижней границе изображения

Если атрибут «align» не прописан, происходит выравнивание по нижнему краю изображения.

Результат на терминале:

Пример 3| Несколько изображений на одной строке с разными выравниваниями

Если на одной строчке вставлено несколько изображений с разными выравниваниями, то весь текст выравнивается по значению заданному у первого изображения.

1 - center <img size="stretch" align="center" max>Images\picture.jpg</img> 2 - bottom <img size="stretch" align="bottom" max>Images\picture.jpg</img>

Результат на терминале:

Вставка изображения в кнопку меню

Пример 1 | Вставка изображения в кнопку меню с ограничением размеров

Для вставки изображения в кнопку меню тег <img>…</img> необходимо размещать в самой кнопке.

<img size="stretch" max max>{картинка1}</img>

В данном примере, мы указали размер области, в которую вставляем изображение, задав максимальную ширину и высоту. Дополнительно задали атрибут «size="stretch"», который увеличит (уменьшит) изображение до этих размеров. Само изображение задано переменной.

Не обязательно указывать оба параметра размеров, можно указать только один (высоту или ширину изображения).

Результат на терминале:

Пример 2 | Вставка изображения в кнопку меню без конкретных заданных размеров

Посмотрим, что будет, если не задавать конкретные размеры области изображения.

<img size="stretch">{картинка1}</img>

Результат на терминале:

Изображение растянулось до максимально возможного размера.

Рекомендуется задавать конкретные размеры области изображения для вставки в кнопку меню, для корректного отображения картинки.

Размеры изображения

Пример 1 | Размер без масштабирования

Чтобы вставить изображение без масштабирования необходимо задать атрибут size ="normal".

<img size ="normal">Images\picture.jpg</img>

Результат на терминале:

Изображение было обрезано, т.к. полностью не уместилось на экране.

Пример 2 | Размер с масштабированием

Чтобы увеличить (уменьшить) размер изображения до размера области вставки, необходимо задать атрибут size ="stretch".

<img size="stretch">{картинка}</img>

Результат на терминале:

Пример 3 | Задание конкретных размеров изображения

Максимальный размер (высоту и ширину) изображения можно указывать в процентах или пикселях. В данном примере у изображения 1 указана максимальная высота в процентах, у изображения 2 указана в пикселях.

1 <img size="stretch" max>{картинка}</img> 2<img size="stretch" max>{картинка}</img>

Результат на терминале:

Если высота или ширина изображения задана в процентах, то на разных терминалах (в зависимости от размеров экрана) размер картинки будет разным.

Прозрачность цвета фона изображения

Пример 1 | Прозрачность цвета фона задается названием цвета

Посмотрим, как работает прозрачность цвета фона изображения. Возьмем одно изображение. В первом случае не будем задавать прозрачность (оригинал), во втором случае добавим прозрачность зеленого цвета фона, задав атрибут «tcolor="Green"».

Оригинал изображения
<img size="stretch" max>{картинка2}</img><hr/>
Добавлен атрибут tcolor="Green"
Прозрачность зеленого цвета фона
<img tcolor="Green" size="stretch" max>{картинка2}</img>

Результат на терминале:

Зеленый цвет в изображении стал прозрачным.

Пример 2 | Прозрачность цвета фона задается кодом цвета

Задать прозрачности цвета фона можно не только написав цвет, но и введя код цвета #000000 (черный).

Оригинал изображения
<img size="stretch" max>{картинка2}</img><hr/>
Добавлен атрибут tcolor="#000000"
Прозрачность черного цвета фона
<img tcolor="#000000" size="stretch" max>{картинка2}</img>

Результат на терминале:

Черный цвет в изображении стал прозрачным.

Пример 3 | Прозрачность цвета фона задается первым пикселем изображения

Кроме задания конкретного цвета прозрачности фона, можно задать прозрачность, указав цвет, взятый у первого пикселя вставляемого изображения с координатами (0,0), добавив атрибут «tcolor="yes"». В данном примере это красный цвет.

Оригинал изображения
<img size="stretch" max>{картинка2}</img><hr/>
Добавлен атрибут tcolor="yes"
Прозрачность цвета фона взятого из первого пикселя картинки (красный)
<img tcolor="yes" size="stretch" max>{картинка2}</img>

Результат на терминале:

Красный цвет в изображении стал прозрачным.