@hypothesis/frontend-shared/lib/components/data/AspectRatio.d.ts

Shared components, styles and utilities for Hypothesis projects

import type { ComponentChildren } from 'preact';
export type AspectRatioProps = {
    children: ComponentChildren;
    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
    /**
     * CSS aspect ratio, expressed as a string. Default '16/9'. Used in a CSS
     * `calc()` expression.
     */
    ratio?: string;
};
/**
 * Render a wrapper element that constrains its first direct child to the
 * specified `ratio`.
 *
 * This component relies upon the old-fashioned "bottom-padding hack" to
 * constrain content until such a time as the browser support for `aspect-ratio`
 * is sufficient.
 *
 * In this model, proportional bottom padding is applied to a
 * relatively-positioned, full-width container, while the content element itself
 * is absolute-positioned with respect to the container.
 *
 * See https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/#the-padding-bottom-hack
 */
export default function AspectRatio({ children, objectFit, ratio, }: AspectRatioProps): import("preact").JSX.Element;