styleOptions.bubbleImageHeight is being deprecated in favor of styleOptions.bubbleImageMaxHeight and styleOptions.bubbleImageMinHeight. The option will be removed on or after 2026-07-05
Image will be shown at minimium height of 180 and maximum height of 240, instead of fixed height of 240
To revert to previous behavior, set both values to 240
Added
Added styleOptions.bubbleImageMaxHeight and styleOptions.bubbleImageMinHeight for variable image height, in PR #5236, by @compulim
Description
Previously, to support IE11, we could not use object-fit. For simplicity, we make images with fixed height.
As we discontinued support of IE11, we can now making image height variable (min/max) and relies object-fit to honor the aspect ratio.
Design
The image resize logic is "enlarge image to meet fixed width, then crop/pad top/bottom to meet height."
Current design is "fixed height", it will crop the image if it is too tall, or pad the image if it is too short.
This PR will enable variable height by min/max. When min is set to 0 and max is set to Infinity, it means "fixed width and make the image as short/tall as it fit."
When the image is taller than max, it will be cropped. When the image is shorter than min, it will be padded.
When min/max are set to the same number, say, 240, it will always crop/pad the image at height of 240px and this is same as today's behavior and enable backward compatibility.
If the deprecating styleOptions.bubbleImageHeight is set, it will propagate to min/max value and is backward compatible.
Specific Changes
Added styleOptions.bubbleImageMaxHeight and styleOptions.bubbleImageMinHeight, both defaults to 240
Deprecated styleOptions.bubbleImageHeight and changed default to undefined, which will honor min/max
Updated some VRT due to sub-pixel differences
[x] I have added tests and executed them locally
[x] I have updated CHANGELOG.md
[x] I have updated documentation
Review Checklist
This section is for contributors to review your work.
[x] Accessibility reviewed (tab order, content readability, alt text, color contrast)
[x] ~Browser and platform compatibilities reviewed~
[x] CSS styles reviewed (minimal rules, no z-index)
[x] ~Documents reviewed (docs, samples, live demo)~
[x] ~Internationalization reviewed (strings, unit formatting)~
[x] ~package.json and package-lock.json reviewed~
[x] ~Security reviewed (no data URIs, check for nonce leak)~
Changelog Entry
Breaking changes
styleOptions.bubbleImageHeightis being deprecated in favor ofstyleOptions.bubbleImageMaxHeightandstyleOptions.bubbleImageMinHeight. The option will be removed on or after 2026-07-05180and maximum height of240, instead of fixed height of240240Added
styleOptions.bubbleImageMaxHeightandstyleOptions.bubbleImageMinHeightfor variable image height, in PR #5236, by @compulimDescription
Previously, to support IE11, we could not use
object-fit. For simplicity, we make images with fixed height.As we discontinued support of IE11, we can now making image height variable (min/max) and relies
object-fitto honor the aspect ratio.Design
The image resize logic is "enlarge image to meet fixed width, then crop/pad top/bottom to meet height."
Current design is "fixed height", it will crop the image if it is too tall, or pad the image if it is too short.
This PR will enable variable height by min/max. When min is set to
0and max is set toInfinity, it means "fixed width and make the image as short/tall as it fit."When the image is taller than max, it will be cropped. When the image is shorter than min, it will be padded.
When min/max are set to the same number, say,
240, it will always crop/pad the image at height of 240px and this is same as today's behavior and enable backward compatibility.If the deprecating
styleOptions.bubbleImageHeightis set, it will propagate tomin/maxvalue and is backward compatible.Specific Changes
styleOptions.bubbleImageMaxHeightandstyleOptions.bubbleImageMinHeight, both defaults to240styleOptions.bubbleImageHeightand changed default toundefined, which will honormin/maxCHANGELOG.mdReview Checklist
z-index)package.jsonandpackage-lock.jsonreviewed~