[draft] Add 'fill mode' to NgOptimizedImage #47727
Conversation
Add a feature to automatically generate the srcset attribute for images using the NgOptimizedImage directive. Uses the 'sizes' attribute to determine the appropriate srcset to generate.
Add a boolean attribute called 'fill' to the ngOptimizedImage directive, which removes the need for height and width, and adds styling to make the image fill its container.
| this.setHostAttribute('width', this.width!.toString()); | ||
| this.setHostAttribute('height', this.height!.toString()); | ||
| if (this.fill) { | ||
| this.setHostAttribute('style', this.getFillStyle()) |
There was a problem hiding this comment.
I think it'd be great to avoid custom parsing of styles and writing them directly to the DOM via renderer.
The "style" attribute values are handled by the framework and it takes into account various use-cases which might be broken because of writing to the DOM directly.
Instead, we can try to lean on the framework functionality and set extra styles via host binding, similar to this example:
This would delegate the styling processing, overrides and handing of the "style" attribute bindings to the framework. WDYT?
There was a problem hiding this comment.
(I think this is actually a necessity, otherwise this call would clobber user-applied style bindings).
| top: '0', | ||
| right: '0', | ||
| bottom: '0' | ||
| } let providedStyles: {[key: string]: string|number} = {} if (this.style) { |
There was a problem hiding this comment.
It looks like some semicolons are missing, thus the formatting is broken.
AndrewKushnir
added
the
target: major
jessicajaniuk
added
the
area: common
|
With @AndrewKushnir and @kara's guidance I re-implemented this feature differently. I opened a new PR since this one was also having some merge issue: #47738 |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
This PR creates a new boolean attribute on the ngOptimizedImage directive called
fill, which allows the directive to be used without height and width, and which automatically styles the image to fill it's containing element.This PR still requires some additional test cases before merging. Posting now for feedback from @AndrewKushnir and @pkozlowski-opensource. CC: @kara