Autofit image in table cell

OL Connect Professional General
1

Hi I am new to the Connect designer.

In old designer, I had an option for Best Fit.

How do I create that same behavior when placing over sized images to fit proportionally and centered in the

New designer?

Thanks

2

Once you’ve placed the image on the page, you can set it’s height and width to 100% instead of a fixed value. This will force it to fit whatever container it’s in.

If it’s just inserted in line on the page, it’ll fit to the margins of the page, for example.

Place it inside of a Div and it’ll resize to whatever dimensions the Div uses.

You can see a bit more about this, as well as how to do this through CSS here: html - How to auto-resize an image while maintaining aspect ratio - Stack Overflow

3

Hi,

to fit and position an image within a div the best approach is a script because the dynamic images can have different proportions.

  1. Create a new script in the designer (selector is body)
  2. Copy the following code into the scripteditor
  3. Give your dynamic image the class fitImage
query('.fitImage').css({
'position': 'absolute',
'margin': 'auto',
'top':'0',
'bottom':'0',
'left':'0',
'right':'0',
'height':'',
'width':'',
'max-height':'100%',
'max-width':'100%'
});

Your images will be scaled to fit the div and will be centered within the div.

Hope that helps
Thomas

PS: You will see the effect only in preview mode.