Skip to main content
S
svisveswaraiya_2859881-Visitor
1-Visitor
April 22, 2022
Solved

Image as square image

  • April 22, 2022
  • 3 replies
  • 1340 views

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.

Best answer by TonyZhang

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"

3 replies

P
PaiChung22-Sapphire I
22-Sapphire I
April 22, 2022

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.

D
DanWolf14-Alexandrite
14-Alexandrite
April 22, 2022

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.

T
TonyZhangCommunity ManagerAnswer
Support
April 26, 2022

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"

Terms & ConditionsAccessibility statement