Image Resize via HTML Editor

[aptk]

how can i resize the image size according to screen size by using HTML Editor?

For this, i have written html code as

<div class="container" style="width: auto;">

<p style="width: auto;"><img style="width: 1100px; height: 130px;" title="" src="/logo_service-now.gifx" alt="" align="baseline" border="" hspace="" vspace="" /></p>

<p style="widows: 1;"><span style="font-family: arial, helvetica, sans-serif; font-size: large;">Help us improve by taking our short satisfaction survey related to your recent HR  request<br /></span></p>

<p style="widows: 1;">  </p>

<p>  </p>

</div>

Zoom level => 100%

But when i am increasing or decreasing Zoom level of screen by holding Ctrl key + then scrolling up with mouse's scroll wheel to zoom in or out, image size should also get resize as in below screenshot, area highlighted by yellow color is getting resized according to screen.

Zoom Level => 50%

[ananthagowraram]

Hi Aptk,

Try adding bewlo style for image

img {
  max-width: 100%;
  height: auto;
 
}

Regards

Anantha Gowraram

[aptk]

Hello Anantha,

height should be the same, only width needs to change as per screen size.

May i know where i will be including this code in above code or need to create seprate css class in service now?

Regards,

AP

[ananthagowraram]

Hi Aptk,

You can set auto to width as well to resize the width.

You can add these lines in img tag itself like below

<img style="height:100px,width:auto"/>

Regards

Anantha Gowraram

[aptk]

Hello anantha,

I tried by writing below code but in both cases it is not working.

<div class="container" style="width: auto;">

<p style="width: auto;"><img style="height: 100px, margin-left:100px;" title="" src="/logo_service-now.gifx" alt="" align="baseline" border="" hspace="" vspace="" /></p>

<p style="widows: 1;"><span style="font-family: arial, helvetica, sans-serif; font-size: large;">Help us improve by taking our short satisfaction survey related to your recent HR  request<br /></span></p>

<p style="widows: 1;">  </p>

<p>  </p>

</div>

<div class="container" style="width: auto;">

<p style="width: auto;"><img style="height:100px,width:auto;" title="" src="/logo_service-now.gifx" alt="" align="baseline" border="" hspace="" vspace="" /></p>

<p style="widows: 1;"><span style="font-family: arial, helvetica, sans-serif; font-size: large;">Help us improve by taking our short satisfaction survey related to your recent HR  request<br /></span></p>

<p style="widows: 1;">  </p>

<p>  </p>

</div>

Regards,

AP