# Как создать идеальный шаблон с Изображением

**Шаг 1. Создайте шаблон изображения**

1. Выберите **шаблон Пустой блок** в модальном окне выбора шаблона.
2. Перейдите **в Про- режим**: выберите колонку и добавьте внутрь элемент изображения.

<figure><img src="/files/zXwHDvIesSkKMElxUmvF" alt=""><figcaption><p>Нажмите на иконку "плюс" в всплывающем меню.</p></figcaption></figure>

<figure><img src="/files/cFkuDKNQRqZmjVHNsbmW" alt=""><figcaption><p>Пример пустого элемента.</p></figcaption></figure>

**Шаг 2. Отрегулируйте размеры изображения**

1. Нажмите на вкладку **«Сетка»**.
2. Настройте **ширину и высоту**: отрегулируйте размеры компонента изображения в соответствии с вашими потребностями.

<figure><img src="/files/ZKiN6xe8o8T2YToIMyqz" alt=""><figcaption><p>Пример изображения ао всю ширину: Ширина - 100%, Высота - 600 пикселей.</p></figcaption></figure>

**Шаг 3: Добавьте изображение**

1. Нажмите на вкладку **«Данные»** : выберите изображение из вашей библиотеки.
2. Поэкспериментируйте с настройкой масштабирования, чтобы отрегулировать изображение:

**Заполнить:** Заполняет всю площадь, при необходимости обрезая изображение.

**Вписать:** Изображение масштабируется с сохранением пропорций.

**Растянуть:** Изображение растягивается по всей площади, без сохранения пропорций

{% embed url="<https://drive.google.com/file/d/1aeNWmopnnz1Ye4JRAPkoTOSKCsPCrYy0/view?usp=sharing>" %}

**Шаг 4. Сохраните блок как шаблон, чтобы повторно использовать его в своем проекте или сделать доступным для своей команды.**\
\
Готово! Ваш идеальный шаблон с изображением теперь готов к использованию.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.lynda.ru/how-to/kak-sozdat-idealnyi-shablon-s-izobrazheniem.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.