Keeping the aspect ratio of an image in a dynamic list

Hello,

my app puts images uploaded by the user into a Dynamic List. Utilizing the Image object the images are all the same size in the list. However, depending if the original image portrait or landscape the aspect ratio is distorted.

? is there a way keep the aspect ratio similar to the auto, cover, contain of a background image?

? or, is there a way to dynamically assign a background image for example to a Block object in Dynamic list?

Or, is there another way to handle this?

Thanks

Hi @Joerg

What UI components do you use to display the list with images?

or, is there a way to dynamically assign a background image for example to a Block object in Dynamic list?

Select Block, expand Background tab, there will be image option.

The structure is

  • Container
    • Row - which is the dynamic list
      • Cell - which is the dynamic list item
        • Block - to define the border radius
          • Image - to contain the image by setting the width to 100% and the Max height to 150 px
          • Text - to display the name of the item

Thanks, Maksym,

can the background image be changed programmatically from within a dynamic list?

Thanks

You can define the logic to load the necessary images into dynamic list.
Here is a good tutorial from Mark:

If you want to be able to change any image in the list, you can save the images to the database, then load it to the dynamic list. And when necessary, you can update the database entry and reload the list.

Best Regards,
Maksym

Do you mean that all images are the same size but they are “squashed”?

Yes, @Maksym_Khobotin

in the video the images have different sizes depending of the underlying file. By setting the image size to 100% width and 150 px height all the images in my list are the same size, however they are squashed or stretched.

Is there a remedy for that?

Thanks

Hi, @Joerg

I believe the issue is in width, try to change width to the desired pixel size and height change to auto, as in Mark`s video.

Regards,
Marina

Thanks, @Marina.Rudenko,

that takes care of the aspect ratio but then the pictures have all different heights (like in Mark’s video).

Guess what I am looking for is a result like the Size - Cover option for a background image.

Any ideas how to accomplish that?

Or, can the background image of a Block be set programmatically?

Or, can an image be created/saved with the desired dimensions programmatically? Since it is an image uploaded by the user I don’t have any control over die size.

Thanks

@Joerg, we can offer you the solution below:

  1. Add block component;
  2. Add to it fixed dimensions which you need, es example 150 x 150 px;
  3. Add an image inside this block;
  4. Set the image at least one property, for example min-height:1px (This step is temporary, but for now we need it. There is problem on this issue, our engineers are looking for it)
  5. Add this logic to your image component (make sure, that the image itself does not have width/height styles).
    image

Regards,
Marina

@Marina.Rudenko : Thanks for this hint. I would wish, this feature becomes part of the image component configuration, because this is used very often.
One more question: The actual standard name of this property is “object-fit” (see e.g., object-fit - CSS | MDN). Using this identifier works similar well as when using your camelCase notation. Are you translating any standard css property to camelCase?
Thx

JS engine gives possibility to use a notation - object[“some-property”] or object[“someProperty”]
And two way of setting property work similarly in this case.

Regards, Dima.