Image

Default constrains for media elements such as img, video, iframe, object or svg

View Source 

Usage

@import "winduum/src/components/image/index.css" layer(components);

Variants

• default 

Tokens

• avatar 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Ratio

html

<div class="x-image">
    <img class="aspect-[3/2]" src="https://img.logoipsum.com/250.svg" loading="lazy" alt="">
</div>

vue

<script setup lang="ts">
    import { UiImage } from '@/components/image'
</script>

<template>
    <UiImage>
        <img class="aspect-[3/2]" src="https://img.logoipsum.com/250.svg" loading="lazy" alt="">
    </UiImage>
</template>

jsx

import { UiImage } from '@/components/image'

export function Example() {
    return (
        <UiImage>
            <img className="aspect-[3/2]" src="https://img.logoipsum.com/250.svg" loading="lazy" alt="" />
        </UiImage>
    )
}

Rounded

<div class="x-image rounded">
    <img class="aspect-square" src="https://picsum.photos/seed/picsum/200/200" loading="lazy" alt="">
</div>

Avatar

<div class="x-image avatar size-32">
    <span>LB</span>
</div>

Skeleton

<div class="x-image before:skeleton">
    <img class="aspect-[3/2]" src="https://picsum.photos/seed/picsum/300/200" loading="lazy" alt="">
</div>

Iframe

<div class="x-image">
    <iframe class="aspect-square" loading="lazy" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10243.539317839937!2d14.3677486!3d50.0697185!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x66f5877a189baf0d!2sTvorba+webov%C3%BDch+str%C3%A1nek+-+New+Logic+Studio!5e0!3m2!1sen!2scz!4v1547215701439" width="600" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>