Image size in Editor in % not in px size

[Egbert]

Hi,

When adding a large image (>1000px width) in the Editor, it looks fine on a laptop/tablet.

But when showing it on a mobile, it doesn't.

Is it possible to enter the image size in % so it auto rescales depending on the screen size?
Or is there another way to solve this problem?

Thanks...

[Stoyan]

Hello Egbert,

When you add an image to the Editor it's wrapped in an img Html element. You can use the available Stylesheets configuration to set up different sizes of the img element for different screen sizes.

.StyleSheets(css => css
                    .Add(Url.Content("~/shared/web/editor/editorStyles.css"))
                  )

I hope this information helps in the scenario at hand.

Regards,
Stoyan
Progress Telerik

[Egbert]

Hi,

I've never used this before, so hopefully you can help me a little bit further than this.

I would like to add the following style for an image to the editor:

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

How should the complete editorStyles.css file look like and do I only need to use the .StyleSheets(.....) line in my current html file to implement this style?

Thanks and best regards,
Egbert

[Alexander]

Hi Egbert,

In general, the Editor component renders its content inside an iframe by design. Having this in mind, the content inside the iframe is isolated from the main page, thus any styling that you apply to the main page will not intervene with what is in the iframe content.

In this regard, there are no restrictions as to what rules need to be applied or not, when it comes to configuring the stylesheet file for the iframe content.

Finally, for your convenience, I am also attaching a runnable sample for you to review that illustrates how the stylesheets configuration option can be utilized within the content area of the Editor with the previously provided style rules. Notice that the custom stylesheet is allocated within the ~/wwwroot/css folder

Additionally, you can review the following resources that you might find useful as well:

• Editor Styles Demo
• Editor Styling of Content Documentation