-
Notifications
You must be signed in to change notification settings - Fork 708
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Responsive Image Size #745
Labels
Comments
If you're planning to use images with varying heights/widths. You can solve this using CSS. |
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. |
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The text was updated successfully, but these errors were encountered: