Image

Use image element for styling an image. These styles are used in an image macro.

Examples

Here is an example of an image element

HTML

<picture class="image">
    <source srcset="/link/to/my-image.webp" type="image/webp">
    <img width="240" height="120" src="/link/to/my-image.jpg" decoding="async" lazy="1">
</picture> 

LESS

You can modify any image less variable in your User Less section to change image styles.

Image styles

Here are standard image styles.

.image {
    display: flex;

    &_block {
        display: block;
    }

    &_rounded {
        border-radius: @imageRoundedBorderRadiusInPx;
    }

    &_s {
        aspect-ratio: 1/1;
        min-width: @imageSMobileMinWidth;
        min-height: @imageSMobileMinHeight;
        width: @imageSMobileWidth;
        height: @imageSMobileHeight;
    }
}

@media screen and (min-width: @breakPointSm) {
    .image {
        &_s {
            min-width: @imageSMinWidth;
            min-height: @imageSMinHeight;
            width: @imageSWidth;
            height: @imageSHeight;
        }
    }
}

Macros reference

• image