AspectRatio

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

Установка

npx @zizigy/capsule add AspectRatio

Использование

Базовое соотношение сторон

<capsule-aspect-ratio ratio="16/9">
  <img
    src="https://picsum.photos/800/450"
    alt="Изображение"
  />
</capsule-aspect-ratio>

Распространённые соотношения

16:9 (Широкоэкранный)

4:3 (Классический)

1:1 (Квадрат)

21:9 (Ультраширокий)

<!-- 16:9 -->
<capsule-aspect-ratio ratio="16/9">
  <img
    src="https://picsum.photos/800/450"
    alt="Изображение"
  />
</capsule-aspect-ratio>

<!-- 4:3 -->
<capsule-aspect-ratio ratio="4/3">
  <img
    src="https://picsum.photos/800/600"
    alt="Изображение"
  />
</capsule-aspect-ratio>

<!-- 1:1 (Квадрат) -->
<capsule-aspect-ratio ratio="1/1">
  <img
    src="https://picsum.photos/600/600"
    alt="Изображение"
  />
</capsule-aspect-ratio>

Использование формата с двоеточием

Вы также можете использовать формат с двоеточием вместо слэша:

<capsule-aspect-ratio ratio="16:9">
  <img
    src="https://picsum.photos/800/450"
    alt="Изображение"
  />
</capsule-aspect-ratio>

С видео

<capsule-aspect-ratio ratio="16/9">
  <video controls>
    <source
      src="video.mp4"
      type="video/mp4"
    />
  </video>
</capsule-aspect-ratio>

С пользовательским контентом

<capsule-aspect-ratio ratio="3/2">
  <div style="background: linear-gradient(...);">
    Пользовательский контент
  </div>
</capsule-aspect-ratio>

Портретные изображения

<capsule-aspect-ratio ratio="3/4">
  <img
    src="https://picsum.photos/300/400"
    alt="Портрет"
  />
</capsule-aspect-ratio>

API

Свойства

Свойство	Тип	По умолчанию	Описание
ratio	string	''	Соотношение сторон (например, '16/9', '16:9', '4/3', '1')

Формат

Атрибут ratio принимает значения в следующих форматах:

• "16/9" - Формат со слэшем (рекомендуется)
• "16:9" - Формат с двоеточием (тоже поддерживается)
• "1" - Одно число (интерпретируется как 1/1)

Примечания

• Дочерние элементы автоматически заполняют контейнер
• Используйте CSS свойство object-fit на изображениях/видео для правильного размера (по умолчанию cover)
• Компонент использует CSS свойство aspect-ratio под капотом