Displaying pictures via template node

[nerevar]

Hello,

I'm having problems in displaying pictures on node-red dashboard.
I'm using template node to display an image from hosting service. Image is an PNG converted from PDF, resolution is full HD (in width) without background.

However, when loaded with template it looks like its a lot smaller resolution:

Here is the original from hosting service:

The code I'm using is here:
<img src="https://i.ibb.co/PgpCYVt/nazivi-stepeksa2.png">
Why does it get so bad?

Also, when trying to use a 4k resolution picture I have no control over the "container" where the picture is located. E.g. when I try to reduce its dimmensions then I get cropped picture.

I was using this codes:

<style>
.resize {
  max-width: 50%;
}
</style>
<img src="https://i.ibb.co/g4Rn4h2/stepaj-4k.png" class="resize">

and this:
<img src="https://i.ibb.co/g4Rn4h2/stepaj-4k.png" width="300" height="121">

Is there a correct way of resizing the image without loosing the content in node-red?

Here it looks so easy, but it doesn't work in node-red:
https://www.quackit.com/html/howto/how_to_resize_images_in_html.cfm

[kevinGodell]

If you want to scale the img, you can use object-fit in the css. And for clarification, are you using the regular template or the ui_template in the node-red-dashboard?

[nerevar]

OK I will try.

About the template, I've tried both with the same results. Now I'm using regular template + mui_template because besides this img I also have some text + I'm sending the socketid through it to the mui_template

[nerevar]

The only method that worked for me was loading an image from filesystem using node, converting it with base64 node and then loading it from a context..