Applab: add fit property for images #19011
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
fit image
property for Image elements in design mode. The four exposed options in the dropdown arefill
,contain
,cover
, andnone
. See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit for details. Existing projects with images will default tofill
for compatibility reasons. New images created in design mode or using theimage()
API will default tocontain
.setProperty()
andgetProperty()
APIs with the property namefit
. The droplet blocks and text mode autocomplete will show the same four options in the dropdown when thefit
property is chosen.object-fit
style is not supported on some older browsers (including all versions of IE), we use theobject-fit-images
polyfill to ensure that everything still works on IE. Additionally, when saving projects, we only store our owndata-object-fit
custom attribute with this value. At load time, we tack on the appropriate styles based on the value of that custom attribute. The polyfill needs to be triggered at launch, whenever we change thefit
property, and within design mode'smakeDraggable()
after it wraps the image elements. The polyfill monitors changes to thesrc
and the image element's size on its own.fit
property