Allow explicit image sizes

[dclaux]

Closed as dupe of #622

Implementation

• JavaScript (Support for automatic padding for containers with a background color or image and support for color palettes on containers #475)
• UWP ([UWP] Allow explicit image sizes #1334)
• WPF ([.NET] Allow explicit image sizes #1337)
• iOS ([iOS] Allow explicit image sizes #1336)
• Android ([Android] Allow explicit image sizes #1335)
• Documentation

Problem

Our current image sizing is way too restrictive. We should allow explicit image sizing, allowing card authors to use a large image and render it at the desired size.

Solution

Introduce explicit image capability sizing in all renderers. Exposing this capability via markup can then be done via extensibility.

The HTML renderer will add the following two properties to the Image class:

Property name	Type	Description
width	string (unit)	The desired on-screen width of the image, ending in "px"
height	string (unit)	The desired on-screen height of the image, ending in "px"

The names are chosen so as to not interfere with the existing height property.

When either the pixelWidth or pixelHeight properties (or both) are set, the image is explicitly sized using these values. If only one of the two properties is is set, the other dimension is automatically calculated so that the original aspect ratio of the image is respected.

[dclaux]

Keep in mind that it is technically already possible to achieve one's desired image size by setting an Image's size to "auto." However it's not possible to use a larger image and render it at a smaller size, unless that size is one of the 3 we support, and will therefore rarely be the one a card author needs. The proposed feature makes it way easier to do icons that will scale properly from 96dpi screens to high dpi screens.

[danmarshall]

We should also consider what this means if we were to support Responsive layouts. I know it's still a "blue sky" idea, but it could be on our roadmap.

[dclaux]

I think it would actually help - knowing the desired size of an image before loading/rendering it makes it possible to make early layout decisions.

[andrewleader]

Closing as dupe of #622