Responsive Image Size

[SamKomesarook]

Is your feature request related to a problem? Please describe. Thanks so much for the component! It would be great to have the option for a responsive image size (without srcSets) that sets the image to be contained within the parent.

Describe the solution you'd like Perhaps a boolean prop that sets the image to 100% height and width of the parent, with the object-fit set to contain.

Describe alternatives you've considered This styling could be applied via custom styles or classes to the image.

[xiaolin]

If you're planning to use images with varying heights/widths. You can solve this using CSS.

[SamKomesarook]

Can you elaborate? We have put the image gallery in a flexbox, and do not want the width to extend past that. Adding a set width to the img elements, along with an aspect ratio, would really help.

[dmt0]

Something like this worked for me:

.image-gallery-slides {
  max-height: $imageHeight !important;
  .image-gallery-image {
    max-height: $imageHeight !important;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
}

You may not need all of this, but the key is to size image-gallery-slides and image-gallery-image