Главная / Услуги / Хирургия / DEMO: Блок «Картинка с текстом» — все варианты

DEMO: Блок «Картинка с текстом» — все варианты

1. Режим NATURAL — натуральный размер картинки

Режим NATURAL — альбомная фотография (569×401), картинка слева

— Режим: NATURAL (натуральный размер картинки).
— Технология: CSS max-width = ширина оригинала из медиабиблиотеки. Картинка не растягивается выше натурального размера.
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим NATURAL — альбомная фотография (569×401), картинка справа

— Режим: NATURAL (натуральный размер картинки).
— Технология: CSS max-width = ширина оригинала из медиабиблиотеки. Картинка не растягивается выше натурального размера.
— Расположение: картинка справа, текст слева
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим NATURAL — портретная фотография (387×513), картинка слева

Режим NATURAL — портретная фотография (387×513), картинка справа

— Режим: NATURAL (натуральный размер картинки).
— Технология: CSS max-width = ширина оригинала из медиабиблиотеки. Картинка не растягивается выше натурального размера.
— Расположение: картинка справа, текст слева
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

2. Расположение текста (поле description_position) — общее для всех режимов

Режим NATURAL — описание ПОД КАРТИНКОЙ (under_image)

Режим NATURAL — описание ПОД ЗАГОЛОВКОМ (under_title, перед колонками)

— Режим: NATURAL (натуральный размер картинки).
— Технология: CSS max-width = ширина оригинала из медиабиблиотеки. Картинка не растягивается выше натурального размера.
— Расположение: картинка слева, текст справа
— Описание: под заголовком (полная ширина, перед колонками)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

3. Режим PRESET — все 8 заданных долей ширины (пропорция 4:3, fit cover)

Режим PRESET — доля ширины ¼ (25%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ¼ (25%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — доля ширины ⅓ (33%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ⅓ (33%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — доля ширины ⅖ (40%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ⅖ (40%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — доля ширины ½ (50%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — доля ширины ⅗ (60%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ⅗ (60%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — доля ширины ⅔ (66%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ⅔ (66%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — доля ширины ¾ (75%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ¾ (75%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — доля ширины 100% (вся ширина, текст уходит ниже)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: 100% (вся ширина, текст уходит ниже)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

4. Режим PRESET — все 8 пропорций картинки (размер ½, fit cover)

Режим PRESET — пропорция 1:1 (квадрат)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — пропорция 4:3 (альбом)

Режим PRESET — пропорция 3:2 (альбом)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 3:2 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — пропорция 16:9 (широкий)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 16:9 (широкий) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — пропорция 21:9 (сверхширокий)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 21:9 (сверхширокий) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — пропорция 4:5 (портрет)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:5 (портрет) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — пропорция 3:4 (портрет)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 3:4 (портрет) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — пропорция 2:3 (портрет)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 2:3 (портрет) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

5. Режим PRESET — способ заполнения object-fit (5 вариантов, размер ½, пропорция 1:1)

Режим PRESET — object-fit: cover

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-fit: contain

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): contain — вписывает картинку целиком, при несовпадении пропорций появятся пустые полосы (letterbox)
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-fit: fill

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): fill — растягивает картинку под рамку, может исказить пропорции
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-fit: scale-down

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): scale-down — как contain, но не увеличивает картинку выше натурального размера
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-fit: none

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): none — натуральный размер картинки, может выйти за рамку (обрезается overflow:hidden)
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

6. Режим PRESET — позиция фокуса object-position (9 вариантов, размер ½, 1:1, cover)

Режим PRESET — object-position: по центру

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-position: сверху

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): сверху
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-position: снизу

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): снизу
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-position: слева

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): слева
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-position: справа

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): справа
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-position: сверху-слева

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): сверху-слева
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-position: сверху-справа

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): сверху-справа
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-position: снизу-слева

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): снизу-слева
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — object-position: снизу-справа

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 1:1 (квадрат) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): снизу-справа
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

7. Режим PRESET — картинка справа от текста (layout=right)

Режим PRESET — layout=right, доля ¼ (25%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ¼ (25%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка справа, текст слева
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — layout=right, доля ⅓ (33%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ⅓ (33%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка справа, текст слева
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — layout=right, доля ½ (50%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка справа, текст слева
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим PRESET — layout=right, доля ⅔ (66%)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ⅔ (66%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка справа, текст слева
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

8. Режим CUSTOM (своя ширина в %) — 8 примеров с разными настройками

Режим CUSTOM — CUSTOM 25% / auto / cover / центр / текст сверху

— Режим: CUSTOM (свободная ширина картинки в %).
— Технология: inline CSS custom property —kb85-img-w + flex + aspect-ratio + object-fit/position.
— Ширина картинки: 25% (редактор задаёт в ACF, диапазон 10–90)
— Текст забирает остаток: 75% ширины
— Пропорция картинки: auto (натуральная пропорция картинки)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Вертикальное выравнивание текста: сверху (CSS align-self)
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим CUSTOM — CUSTOM 35% / 4:3 / cover / фокус сверху / текст по центру

— Режим: CUSTOM (свободная ширина картинки в %).
— Технология: inline CSS custom property —kb85-img-w + flex + aspect-ratio + object-fit/position.
— Ширина картинки: 35% (редактор задаёт в ACF, диапазон 10–90)
— Текст забирает остаток: 65% ширины
— Пропорция картинки: 4:3 (альбом)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): сверху
— Вертикальное выравнивание текста: по центру (CSS align-self)
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим CUSTOM — CUSTOM 50% / 16:9 / contain / центр / текст снизу

— Режим: CUSTOM (свободная ширина картинки в %).
— Технология: inline CSS custom property —kb85-img-w + flex + aspect-ratio + object-fit/position.
— Ширина картинки: 50% (редактор задаёт в ACF, диапазон 10–90)
— Текст забирает остаток: 50% ширины
— Пропорция картинки: 16:9 (широкий)
— Заполнение (object-fit): contain — вписывает картинку целиком, при несовпадении пропорций появятся пустые полосы (letterbox)
— Позиция фокуса (object-position): по центру
— Вертикальное выравнивание текста: снизу (CSS align-self)
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим CUSTOM — CUSTOM 60% / квадрат / cover / фокус снизу / текст сверху

— Режим: CUSTOM (свободная ширина картинки в %).
— Технология: inline CSS custom property —kb85-img-w + flex + aspect-ratio + object-fit/position.
— Ширина картинки: 60% (редактор задаёт в ACF, диапазон 10–90)
— Текст забирает остаток: 40% ширины
— Пропорция картинки: 1:1 (квадрат)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): снизу
— Вертикальное выравнивание текста: сверху (CSS align-self)
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим CUSTOM — CUSTOM 70% / портрет 3:4 / фокус слева / текст по центру

— Режим: CUSTOM (свободная ширина картинки в %).
— Технология: inline CSS custom property —kb85-img-w + flex + aspect-ratio + object-fit/position.
— Ширина картинки: 70% (редактор задаёт в ACF, диапазон 10–90)
— Текст забирает остаток: 30% ширины
— Пропорция картинки: 3:4 (портрет)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): слева
— Вертикальное выравнивание текста: по центру (CSS align-self)
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим CUSTOM — CUSTOM 30% / 16:9 / cover / фокус справа / текст по центру

— Режим: CUSTOM (свободная ширина картинки в %).
— Технология: inline CSS custom property —kb85-img-w + flex + aspect-ratio + object-fit/position.
— Ширина картинки: 30% (редактор задаёт в ACF, диапазон 10–90)
— Текст забирает остаток: 70% ширины
— Пропорция картинки: 16:9 (широкий)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): справа
— Вертикальное выравнивание текста: по центру (CSS align-self)
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим CUSTOM — CUSTOM 40% / 2:3 / contain / центр / текст по центру

— Режим: CUSTOM (свободная ширина картинки в %).
— Технология: inline CSS custom property —kb85-img-w + flex + aspect-ratio + object-fit/position.
— Ширина картинки: 40% (редактор задаёт в ACF, диапазон 10–90)
— Текст забирает остаток: 60% ширины
— Пропорция картинки: 2:3 (портрет)
— Заполнение (object-fit): contain — вписывает картинку целиком, при несовпадении пропорций появятся пустые полосы (letterbox)
— Позиция фокуса (object-position): по центру
— Вертикальное выравнивание текста: по центру (CSS align-self)
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

Режим CUSTOM — CUSTOM 80% / auto / cover / центр / текст сверху

— Режим: CUSTOM (свободная ширина картинки в %).
— Технология: inline CSS custom property —kb85-img-w + flex + aspect-ratio + object-fit/position.
— Ширина картинки: 80% (редактор задаёт в ACF, диапазон 10–90)
— Текст забирает остаток: 20% ширины
— Пропорция картинки: auto (натуральная пропорция картинки)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Вертикальное выравнивание текста: сверху (CSS align-self)
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): картинка во всю ширину, текст под ней.

9. Поведение на мобильном экране (≤768px) — матрица ширина × выравнивание (15 блоков)

Мобиль: ширина 100%, выравнивание влево (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 100%, выравнивание влево.

Мобиль: ширина 100%, выравнивание по центру (на десктопе — PRESET 1/2, 4:3)

Мобиль: ширина 100%, выравнивание вправо (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 100%, выравнивание вправо.

Мобиль: ширина 90%, выравнивание влево (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 90%, выравнивание влево.

Мобиль: ширина 90%, выравнивание по центру (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 90%, выравнивание по центру.

Мобиль: ширина 90%, выравнивание вправо (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 90%, выравнивание вправо.

Мобиль: ширина 75%, выравнивание влево (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 75%, выравнивание влево.

Мобиль: ширина 75%, выравнивание по центру (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 75%, выравнивание по центру.

Мобиль: ширина 75%, выравнивание вправо (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 75%, выравнивание вправо.

Мобиль: ширина 60%, выравнивание влево (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 60%, выравнивание влево.

Мобиль: ширина 60%, выравнивание по центру (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 60%, выравнивание по центру.

Мобиль: ширина 60%, выравнивание вправо (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 60%, выравнивание вправо.

Мобиль: ширина 50%, выравнивание влево (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 50%, выравнивание влево.

Мобиль: ширина 50%, выравнивание по центру (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 50%, выравнивание по центру.

Мобиль: ширина 50%, выравнивание вправо (на десктопе — PRESET 1/2, 4:3)

— Режим: PRESET (заданная доля ширины + жёсткая пропорция).
— Технология: CSS flex с фиксированной flex-basis + aspect-ratio + object-fit/position.
— Доля ширины: ½ (50%)
— Пропорция картинки: 4:3 (альбом) (CSS aspect-ratio)
— Заполнение (object-fit): cover — масштабирует и обрезает по краям, чтобы заполнить рамку без пустых полей
— Позиция фокуса (object-position): по центру
— Расположение: картинка слева, текст справа
— Описание: под картинкой (в её колонке)
— Мобиль (≤768px): ширина картинки 50%, выравнивание вправо.

Более 75 лет мы совершенствуемся,
чтобы быть экспертами

Современное оборудование

Оказание медицинских услуг высокого уровня с применением новейшего оборудования и лучших современных технологий

Врачи эксперты

Сертифицированные специалисты экспертного уровня

Индивидуальный подход

Высокий уровень сервиса и заботы о пациентах. Индивидуальный подход к пациентам

Нужна помощь специалиста?

Оставьте контакты и администратор клиники позвонит в ближайшее время

*Нажимая на кнопку, Вы даёте согласие на обработку Ваших персональных данных в соответствии с Политикой в отношении обработки и защиты персональных данных.