Image

<div class="lazyload-wrapper ">
    <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
<div class="lazyload-wrapper {{ wrapperClass }}">
    <img
        class="
            image
            lazyload
            {{ class }}
        "
        src="{{ src }}"
        data-src="{{ dataSrc }}"
        alt="{{ alt }}"
        {{ attributes }}
    >
</div>
{
  "src": "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=",
  "dataSrc": "/images/banner/banner-480_480.png",
  "alt": "image alt text"
}
  • Content:
    $ratio-container-height: 0;
    $ratio-container-width: 100%;
    
    .ratio-container {
        position: relative;
        height: $ratio-container-height;
        width: $ratio-container-width;
        overflow: hidden;
    
        .ratio-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            height: auto;
        }
    }
    
  • URL: /components/raw/image/_image-ratio.scss
  • Filesystem Path: build/components/Molecules/image/_image-ratio.scss
  • Size: 378 Bytes
  • Content:
    $image__width                       : auto !default;
    $image__max-width                   : 100% !default;
    $image__transition                  : $transition-fade !default;
    $image__wrapper-background-color    : $white !default;
    
    $image__picture-lazyload-width      : 100% !default;
    $image__picture-lazyload-min-height : 56px !default;
    $image__picture-lazyload-bg-image   : url('../images/loader-svg.svg') !default;
    
    .image {
        display: block;
        width: $image__width;
        max-width: $image__max-width;
        transition: $image__transition;
    
        &.lazyload,
        &.lazyloading {
            opacity: 0;
        }
    
        &.lazyloaded {
            opacity: 1;
        }
    }
    
    img,
    picture {
        @extend .image;
    }
    
    .lazyload-wrapper {
        position: relative;
        background-color: $image__wrapper-background-color;
        transition: $transition-base;
    }
    
    picture {
        &.lazyloaded {
            width: $image__picture-lazyload-width;
        }
    
        & > img.lazyload,
        & > img.lazyloaded,
        & > img.lazyloading {
            min-height: $image__picture-lazyload-min-height;
            opacity: 1;
            background-size: $image__picture-lazyload-min-height;
            background-repeat: no-repeat;
            background-position: center;
        }
    
        & > img.lazyloading {
            background-image: $image__picture-lazyload-bg-image;
        }
    }
    
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: build/components/Molecules/image/_image.scss
  • Size: 1.3 KB

No notes defined.