## Адаптивное масштабирование

Свойства `adaptive`, `adaptiveGroup`, `adaptiveAlways`, `objectWidth` и `objectHeight` управляют автоматическим масштабированием изображений для обеспечения визуального соответствия физических размеров объектов на разных изображениях.

**Свойства:**

- `adaptive` — включает режим адаптивного масштабирования
- `adaptiveGroup` — название группы для синхронизации масштаба (по умолчанию `'basic'`)
- `objectWidth` — физическая ширина объекта на изображении в миллиметрах
- `objectHeight` — физическая высота объекта на изображении в миллиметрах
- `adaptiveAlways` — выполнять расчёты даже для невидимых элементов

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

Свойства `objectWidth` или `objectHeight` задают реальные физические размеры объекта на изображении в миллиметрах. Эти значения необходимы для расчёта коэффициента масштабирования — компонент использует их для определения, во сколько раз нужно увеличить или уменьшить изображение, чтобы объекты на разных изображениях выглядели одинакового размера. Достаточно указать только одно из свойств — либо ширину, либо высоту.

Компонент автоматически определяет, по какой оси (горизонтальной или вертикальной) производить масштабирование, основываясь на доступных размерах и пропорциях изображения. Если указан `objectWidth`, масштабирование будет происходить по горизонтали, если `objectHeight` — по вертикали. Это позволяет гибко работать с изображениями разных ориентаций.

Элементы с одинаковым значением `adaptiveGroup` масштабируются синхронно, обеспечивая одинаковый визуальный размер объектов на всех изображениях группы. Это особенно полезно при отображении галерей продуктов или сравнительных таблиц, где важно сохранить визуальное соответствие размеров.

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

```html
<script setup>
import { ref } from 'vue'

const phone1 = ref('/images/phone-model-a.png')
const phone2 = ref('/images/phone-model-b.png')
const phone3 = ref('/images/phone-model-c.png')
</script>

<template>
  <!-- Базовое использование с шириной объекта -->
  <Image
    :value="phone1"
    adaptive
    object-width="76.2"
  />

  <!-- Несколько изображений в одной группе -->
  <Image
    :value="phone1"
    adaptive
    adaptive-group="phones"
    object-width="76.2"
  />
  <Image
    :value="phone2"
    adaptive
    adaptive-group="phones"
    object-width="71.9"
  />
  <Image
    :value="phone3"
    adaptive
    adaptive-group="phones"
    object-width="129.9"
  />

  <!-- С высотой вместо ширины -->
  <Image
    adaptive
    object-height="154.8"
    :value="phone1"
  />

  <!-- Постоянное масштабирование -->
  <Image
    adaptive
    adaptive-always
    object-width="76.2"
    :value="phone1"
  />
</template>
```
