contentMode for img tags does not work

I have a scenario where I want to have an <img /> inside a <lockup /> but I want the image to maintain its aspect ratio. The dimensions of the image may not be known ahead of time such that a proper `width` and `height` attribute may be set on the <img /> tag. This increasingly problematic with attempting to use <prototype /> as the image dimensions need to be known up front. I'd prefer to be able to fix one dimension to a known value, say `height="280"` and have the <img /> element automatically set its width based on the actual width of the image to maintain the proper aspect ratio.


Looking through the docs (https://developer.apple.com/library/content/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/TVJSAttributes.html) it looks like this may be available with the `contentMode` attribute but it doesn't appear to work.


The following combinations were tried without success:


<lockup style="height: 300; width: 200">
     <img src="path/to/image" contentMode="aspect-fit" />
</lockup> 
<lockup style="height: 300; width: 200">
     <img src="path/to/image" contentMode="aspect-fit" height="300"/>
</lockup>


<img />s won't display if both the `height` and `width` attribute are not set which seems to go against the idea of the `contentMode` attribute. When it is set the aspect ratio is fixed at that time and it doesn't appear that `contentMode` applies. This was tried against the latest version of tvOS 11.3.

Accepted Reply

Not at this point in time, please file an enhancement request

Replies

This seems to be a bug in documentation. Can you file a bug report for this?


Its supposed to be either "aspectFill" or "aspectFit".

@jfoo --


Changing the content mode to `aspectFit` didn't seem to have any effect. If you don't set a `width` AND `height` for an image it's not rendered which seems to contradict the `contentMode` property. Can you provide a working example?

You need to specify dimensions for the image so we know how to apply the content mode.


Sizes on the lockup only inform the size of the containing view that has an image; there can be more than just an image in a lockup.

@jfoo --


Is there any way to specify one dimension of the image and let the other dimension grow to match the aspect ratio of the image? I want to use `<prototype />` elements but I have to create a unique `<prototype />` for each possible combination of image width and height and that is a very tedious task.

Not at this point in time, please file an enhancement request