Skip to content

Image

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

View Source 

Usage

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

Variants

  • default 
  • avatar 

Examples

Ratio

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

Rounded

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

Avatar

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

Skeleton

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

Iframe

html
<div class="ui-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>

Released under the MIT License.