nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Set the width of an image dynamically

claudiap

Hi,

I want to display an image, I have to not re-size image, if it fits ok ( if the with is smaller than the page). Otherwise scale so that it fits to the width of the page.

How can I check this at runtime?
Where do i write the script to resize the image?

For any help i would be gratefull.

Find more posts tagged with

Comments

claudiap

I forgot to mention, I would like to set the width in "in"-s, not %. Is it possible to choose the unit of measurement?

Thanks,

Claudia

claudiap

Hi, i did find a solution to my problem, the only thing is that you have to know in "in"s the width and height of the masterpage you place your image in.

Here is the code I put in "on render" event:

oldWidth = parseFloat(this.width);
oldHeight = parseFloat(this.height);

if(oldWidth > 7.73) // 7.73 = the width of the page
{
newWidth = 7.73;
newHeight = (newWidth * oldHeight) / oldWidth;

this.width = newWidth + "in";
this.height = newHeight + "in";
}

oldWidth = parseFloat(this.width);
oldHeight = parseFloat(this.height);

if(oldHeight > 8.9)// 8.9 = the height of the page
{
newHeight = 8.9;
newWidth = (newHeight * oldWidth) / oldHeight;

this.width = newWidth + "in";
this.height = newHeight + "in";
}

I hope this helps someone.