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

Для вставки изображения используется тег следующего формата, расположенный внутри абзаца со стилем Рисунок:

===<Название с расширением>=<Ширина>=<Высота>===

Пример вставки изображения photo.jpg шириной 300 пикселей и высотой 200 пикселей:

===photo.jpg=300=200===

Изображение по умолчанию должно быть во вложенной папке img. Иными словами прописывается путь img/photo.jpg. Пример HTML-кода после преобразования:

<p class="u-picture"><img src="img/photo.jpg" alt="photo.jpg" 
width="300" height="200" class="d-block img-fluid"></p>

Если ширина изображения больше 800 пикселей, например:

===photo.jpg=1200=600===

то HTML-код будет выглядеть так:

<p class="u-picture"><a href="img/photo.jpg" target="_blank">
<img src="img/photo.jpg" alt="photo.jpg" width="800" 
class="d-block img-fluid"></a></p>

Указывается максимальная ширина, а при щелчке на изображении оно будет открыто в максимальном размере на отдельной вкладке браузера. Стиль d-block из библиотеки Bootstrap 4.5 делает тег блочным, а стиль img-fluid — позволяет изменять размер изображения в зависимости от ширины окна.

Оконная оболочка программы ODT2HTML позволяет упростить создание тега. Для этого на вкладке 5. Утилиты (рис. 1.20) перетаскиваем значок файла с изображением из программы Проводник Windows на поле Путь к изображению и сбрасываем его внутри рамки. Поддерживаются следующие расширения файлов с изображениями: .jpeg, .jpg, .png, .bmp, .gif, .tif и .tiff. Путь и название файла будет отображено внутри рамки. Затем нажимаем кнопку Сгенерировать тег изображения. Сгенерированный тег будет вставлен в поле Результат. Размеры изображения будут вычислены автоматически.

Рис. 1.20. Генерация тега для вставки изображения

Изображение по умолчанию должно быть во вложенной папке img. Иными словами прописывается путь img/photo.jpg. Оконная оболочка программы ODT2HTML позволяет задать произвольный абсолютный или относительный путь до всех изображений. Для этого переходим на вкладку 2. Настройки (рис. 1.21) и вводим нужное значение в поле Префикс для картинок.

Рис. 1.21. Указание пути к изображениям по умолчанию