Image: Original Size 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">

<div class="image image--original-size ">
    <picture>
        <source media="(max-width: 840px)" type="image/jpeg" srcset="/media/logo.svg" />
        <source media="(min-width: 841px)" type="image/jpeg" srcset="/media/logo.svg" />
        <img src="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality&#x3D;100" loading="lazy" width="1920" height="824" alt="Image Alt Text">
    </picture>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/image.css?cb={{cacheBuster}}">
{{/if}}

<div class="image {{#if isOriginalSize}}image--original-size{{/if}} {{#if ratio}}image--{{ratio}}{{/if}}">
    {{#if caption}}
    <figure>
        {{> @picture}}
        <figcaption class="image__caption">{{caption}}</figcaption>
    </figure>
    {{else}}
    {{> @picture}}
    {{/if}}
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "altText": "Image Alt Text",
  "caption": "",
  "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
  "fallbackImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=100",
  "width": 1920,
  "height": 824,
  "sources": [
    {
      "type": "image/jpeg",
      "desktopImageUrl": "/media/logo.svg",
      "mobileImageUrl": "/media/logo.svg"
    }
  ],
  "isOriginalSize": true
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.image {
    $this: &;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;

    & > figure {
        position: relative;
    }

    &--original-size {
        display: inline-block;
        width: auto;
    }

    &--16-9 {
        overflow: hidden;
        padding-bottom: 56.5%;
        position: relative;

        picture,
        img {
            @extend %object-fit-cover;
        }
    }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: source/patterns/03-components/media/image/image.scss
  • Size: 513 Bytes

No notes defined.