Welcome UI logo
FOUNDATIONSCOMPONENTSBLOG650+
10.0.0

Menu

    Actions

    • Button
    • ButtonGroup
    • Close Button
    • Link

    Data display

    • Accordion
    • Avatar
    • Badge
    • Card
    • Swiper
    • Table
    • Tag
    • VisuallyHidden

    Feedback

    • Alert
    • StickyNote

      NEW

    • Toast

    Forms

    • Checkbox
    • DatePicker
    • DateTimePicker
    • Field
    • FileDrop
    • FileUpload
    • Hint
    • InputText
    • Label
    • PasswordInput
    • Radio
    • RadioGroup
    • RadioTab
    • Search
    • Select
    • Slider
    • Textarea
    • TimePicker
    • Toggle

    Icons & logo

    • Icon
    • IconStamp

      NEW

    • Logo
    • VariantIcon
    • WelcomeLoader

    Layout

    • AspectRatio
    • Loader
    • Window

      NEW

    Navigation

    • Breadcrumb
    • DropdownMenu
    • Pagination
    • Stepper

      NEW

    • Tabs

    Overlay

    • Drawer
    • Modal
    • Popover
    • Tooltip

    Typography

    • Text

    Utilities

    • Grid background

Overview

Props

AspectRatio

The Aspect Ratio component ensures that elements maintain a consistent width-to-height ratio across different screen sizes. It helps keep interfaces visually balanced and prevents distortion of content by preserving the specified aspect ratio.

Source
Github
import { AspectRatio } from 'welcome-ui/AspectRatio'
const Example = () => {
return (
<AspectRatio className="max-w-[200px]">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" />
</AspectRatio>
)
}
export default Example

Examples

Square

ratio prop default is set to 4 / 3, and the child image or video get an object-fit: cover.

You can update the ratio using the ratio prop. Here we use square for 1 / 1 ratio.

Github

Video

Use video to embed a youtube video. A video ratio corresponds to 16 / 9.

Github

Map

Embed a Google map

Github

Landscape (3 / 2)

Use 3-2 for a landscape. A 3-2 ratio corresponds to 3 / 2.

Github
Welcome loaderLoader

On this page

  • Definition
  • Examples
    • Square
    • Video
    • Map
    • Landscape (3 / 2)
Made with by
Welcome to the jungle logo

Documentations

  • Foundations
  • Components
  • Source code

Updates

  • Releases
  • Issues

Community

  • Github
  • Twitter
  • Medium
  • Jobs