Unable to set Poster's loadDisplayMode

Archived
1

I have struggled all afternoon with the most basic thing: scale an image to cover a set width/height. My original image is 1000x1000. I’d like to have it center cropped and displayed in a 1000x500 container.

Here’s what I believe should work:

<Poster
  uri="pkg:/images/test.jpg"
  width="1000"
  height="500"
  loadDisplayMode="scaleToZoom" />

I expect this to be identical behaviour to an html image “object-fit: cover” setting, however the image is extremely stretched.

I’ve tried so many things, including:

  • Adding loadWidth/loadHeight with the original image size.
  • Using only loadWith/loadHeight values (no width/height).
  • Setting loadWidth/loadHeight to the desired container size and width/height to the original image size.
  • Using a network image.
  • Wrapping the Poster in a sized Rectangle
  • Wrapping the Poster in a Group
  • Combining all of the above with literally every loadDisplayMode just to get something different than a stretched image.

I’ve been unable to produce anything that makes any sense to me. Can someone enlighten me as to what I’m doing wrong?

2

Hi, can you try setting the uri at the very end, after all the scaling related fields are set?

reason:

In order for the load scaling options to work, the option fields must be set in XML markup before the uri field

3

Wow, I’ve been up and down the docs page for Poster. Only thing I can figure is my skip-the-ads vision mentally blocked that yellow box.

I will say, I studied every word of the description of width, height, loadWidth, and loadHeight properties, which is where I would expect such an important piece of information to be.

I also find it odd that they would order the properties in the docs in a way that is incompatible with certain features. I generally order properties based on the docs order.

Thanks for the help!

4

Glad it worked!

No worries, I do this A LOT too haha :sweat_smile: