Image as square image

[svisveswaraiya]

Hi,

version: ThingWorx 9.1

I am using a image widget in a container. A mashup is created for work instruction and we are supposed to display the image to the operators. The requirement is to display the images as square image always. Whatever the original image is and whatever the size of container be, we always wanted to display the image as square image without any part of the image getting hidden. How can we achieve this?

Thanks in advance.

[PaiChung]

Have you looked at the image widget settings? I think it has certain scaling options.

To have it always be square, you may have to 'lock' that part of the layout.

[DanWolf]

I added an Image widget, set the height and width to the same value, and set Scaling to "Fit" and it resized the image to fill the square area.  If you don't want to distort the image, you can use one of the other Scaling options.

[TonyZhang · Accepted solution]

I think what DanWolf mentioned above works.

You can use CSS to style all the ptcs-images as shown in below example, and set scaling to "Fit".

ptcs-image{
   width:50px !important;
   height:50px !important;
}

If you are sure that the original images are square (same height and width) already, you can set scaling to "Contain"