HTML area - image scaled wrong

Enonic version: 7.4.0
OS: Windows 10

Hi,
I am having a hard time to workaround this wrong picture visualization. The picture is pasted inside HTML Area in content type. When i paste it in the angular InnerHTML (witch till now works with HTML Area perfectly) the img is scaled wrong. I Already tried to change the css to set all img for some size, but it did not work. I also tried to set custom width (content in %), which also did not seem to change it in any ways.

Screen if the wrongly scaled pic on website.

query used for getting pic from Enonic:
’ … on com_gksoftware_es_esintranet_Benefit {\n’ +
’ data {\n’ +
’ title\n’ +
’ content(processHtml:{type:absolute})\n’ +
’ icon {\n’ +
’ … on media_Image {\n’ +
’ mediaUrl(type: absolute, download: false)\n’ +
’ }\n’ +
’ }\n’ +

(Wanted to include pic in Enonic content viewer, but i can post only 1 img)

Thank you,
Martin

Hi @Brozek,

Did you get this figured out? In order to try to solve the issue we need to see the generated imageUrl and also what kind of CSS you apply to it on the client. Ideally, we need the image file as well. Basically, everything to be able to reproduce the issue on our side.

Hi @ase,

Unfortunately not. Ok, gonna try to add anything useful.
Image is inserted in html area, that with our query (in description above), creates this answer under data and content :
<figure class=\"captioned editor-align-center editor-style-original\" style=\"margin: auto; width: 60%;\"><img alt=\"mamut_naty_internety.jpg\" src=\"http://gkr-show-server2.qa.gk-software.com:8080/site/default/draft/intranet/_/attachment/inline/1283659e-1d15-41bc-85d6-01f1305f248c:02fb787d62d9b0e99866df2572e530254f484206/mamut_naty_internety.jpg\" />\n<figcaption>Mamut časová osa</figcaption>\n</figure>\n\n<h3 style=\"text-align:justify\">
this is just a part of that answer from enonic but it seems to have all the crucial info for the img.
CSS:
image

The img is injected as part of an html area through angular InnerHTML -> so it should have css set from the enonic html area.

Thank you so much and sorry for this late response,
Martin

@ase
This is the pic:

I can only add one picture in my response, so will add more responses

@ase
Here is pic as the img is set in enonic as well. (If you need i can also add the xml data type of this)

Last part. :slight_smile:

Thanks for your response! Do you also have a link to the actual frontend page where you use the URL of the incorrectly scaled image?

Sorry but i do not have that. Since it’s internal company website, the only allow access is through company vpn.