Chirp Sass Documentation

Product Image

Installation

  yarn add @chewy/kib-product-styles

Import

  @use '~@chewy/kib-product-styles/src/kib-product-image/styles' as kib-product-image;

Mixins

@mixin image-container() { ... }@mixin image-container() { 
  position: relative;
  display: block;
  width: 100%;

  &::after {
    display: block;
    padding-top: 100%;
    content: '';
  }
 }

Description

Root image styles

Parameters

None.

@mixin image() { ... }@mixin image() { 
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
 }

Description

Image element styles

Parameters

None.