scale and centre image

WEB TMS WEB Core
1

I have at the top of my main form a webresponsiveGridPanel with just a webImageContol in the collection.

I can't get it to be centred in the control a remain scaled. ie as the webpage increase the image remains in the centre of the control. eg http://rockstruck.com/ the top logo to centralised when change size.

2

Are you trying to center the image across the whole page, while keeping the width/height of the image the same? It is possible with a bit of CSS to get this to work with the TWebResponsiveGridPanel, but it might be easier to use CSS Flex instead.

Replace the TWebResponsiveGridPanel with a TWebHTMLDiv and place the image inside that component. Set its height and width (align to top for example). Then in the ElementClassName for the TWebHTMLDiv component you can add the Bootstrap classes to make it work.

d-flex justify-content-center align-items-center

If you want to stick with the TWebResponsiveGridPanel, and you don't plan on adding other components other than the image, you can try and edit the Layouts property and set them all to have the same style of "1fr" but then its not really all that responsive :wink: I tried it out but also had to add a bit of CSS to get the image to move over. I don't see where to add that in the properties anywhere.

#TForm7_ResponsiveGridPanel52 > div:nth-child(1) {
  text-align: center;
}

You could also add a value to ElementID so that it can be referenced here directly, or maybe in code. For example, if you set the TWebResponsiveGridPanel to have an ElementID value of "RespGrid1" you could then use:

#RespGrid1 > div  {
  text-align: center;
}

Or just in code you could try

asm
  RespGrid1.firstElementChild.setProperty('text-align','center');
end;