Issue with getting Images to Resize in my Blazor Application with Azure Web App

Question

Issue with getting Images to Resize in my Blazor Application with Azure Web App

Andrew Sabin 80

Hello Again Microsoft Azure Support,

Thank you again for your help with my URL question I had earlier.

Recently I have been having issues with getting images to resize after they reach the @media(max-width 768px) part of my CSS file.

Specifically, whenever I want the program to read in a MarkupString for an HTML string created by a WYSIWYG/Rich Text Editor, it refuses to change the width and height of an image being read in once the screen width reaches 768px. In the case of both razor pages that this applies to, the display is set to display: grid;

The MarkUpString is used as such:

<div class="content-description-container">
				@((MarkupString)contentRevision.Value.Description)
</div>

In the case of one of my pages, I have it change from a specific grid pattern to having all the items listed top to bottom, where my CSS file has the following for the column that contains my MarkupString value for in the case of @media(max-width 768px) :

.content-review-column {
    order: 4;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    justify-content: center;
}
.content-review-column ::deep img {
    display: block;
    max-width: 100% !important;
    width: auto;
    height: auto !important;
    object-fit: contain;
    margin: 0.5rem 0;
}
.content-description-container {
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
}
.content-description-container ::deep img {
    display: block;
    max-width: 100% !important;
    width: auto;
    height: auto !important;
    object-fit: contain;
    margin: 0.5rem 0;
}

And for the other page that uses MarkupString, I keep everything I have just (for @media(max-width 768px) ):

.article-body-col ::deep img {
    display: block;
    max-width: 100% !important;
    width: auto;
    height: auto !important;
    object-fit: contain;
}

I'm trying to give as much details as I can, but to summarize, images do not shrink when the width reaches 768px or below when deployed on Azure Web App but do so in development.

If you need any further information, please let me know, I would be happy to provide it.

Thank you very much for your help and time,
Andrew Sabin

Andrew Sabin 80 Reputation points

2026-08-16T22:52:23.0066667+00:00

Hey there @Golla Venkata Pavani ,

Thank you for your reply. Unfortunately, in production I am not having any success with getting the images to resize after trying all of the solutions you suggested.

I'm thinking there might be an issue with the class that the images are given once they are uploaded and set into the WYIWYG Editor:
<img src="https://images.gmntgstrg.com/formats/dispatch-2025-cvq0zC/iRAxZ8QG/images/dispatch-censored-cropped.jpg" class="e-rte-image" alt="dispatch-censored-cropped" width="517" height="292" style="min-width: 0px; max-width: 900px; min-height: 0px; width: 517px; height: 292px;">

Along with e-rte-image, e-img-inline is also another class that gets set into the class of each image uploaded into the editor. Could the classes be a potential issue? I have tried to remove them before but I was unable to do so using the Regex method I have been using before.

Thank you very much for your help and time,

Andrew Sabin
Golla Venkata Pavani 7,440 Reputation points Microsoft External Staff Moderator

2026-08-17T09:03:31.16+00:00
Hi @Andrew Sabin

Thanks for the detailed description and for sharing the CSS you’re using. This is a fairly common situation with Blazor when content comes from a MarkupString (especially HTML produced by a rich-text editor).

What’s happening is that Blazor’s CSS isolation rewrites selectors at build time and only applies the scope attribute to elements that belong to the component’s own markup. Content injected via MarkupString is treated as raw HTML, so the ::deep rules you wrote are the correct approach, but they can still lose to the width/height attributes or inline styles that most editors put on the <img> tags. Locally you often see the unbundled CSS and the problem is less noticeable; after publish (the configuration Azure App Service uses) the bundled styles are served and the inline attributes win.

A couple of practical things that usually resolve it:

Make the media-query rules more forceful so they override the inline attributes:

@media (max-width: 768px) { .content-description-container ::deep img, .content-review-column ::deep img, .article-body-col ::deep img { display: block !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; } }

Strip the width/height attributes from the HTML before you pass it to MarkupString. That way the CSS can control sizing cleanly.

As an alternative, move the image-responsive rules into a global stylesheet (e.g. wwwroot/css/app.css) instead of a scoped .razor.css file. Global styles are not rewritten by isolation and tend to be more reliable for dynamically injected content.

Reference:
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-10.0
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-10.0#raw-html

If the answer is helpful, Please do click "upvote” and Yes, this can be beneficial to other community members.

If you have any other questions, let me know in the "comments" and I would be happy to help you
Andrew Sabin 80 Reputation points

2026-08-17T22:51:31.57+00:00

Hey again @Golla Venkata Pavani ,

Your solution with strengthening the CSS values and rendering the MarkupString with the SanitizeImageMarkup method fixed the issue!

Thank you very much for your help!

I have two more small questions before I get going.

1.) Is there a way that I can set your comment as the answer for my question?

2.) Is there a place that I can leave comments or feedback about the help I have been getting with Microsoft Q&A? I just want to let people know that you guys have been doing a wonderful job in helping me with getting my Web App working on Azure through Azure Web App services.

Thanks again,
Andrew Sabin

Answer accepted by question author

0 additional answers

Your answer

Andrew Sabin 80 Reputation points

2026-08-16T22:52:23.0066667+00:00

Hey there @Golla Venkata Pavani ,

Thank you for your reply. Unfortunately, in production I am not having any success with getting the images to resize after trying all of the solutions you suggested.

I'm thinking there might be an issue with the class that the images are given once they are uploaded and set into the WYIWYG Editor:
<img src="https://images.gmntgstrg.com/formats/dispatch-2025-cvq0zC/iRAxZ8QG/images/dispatch-censored-cropped.jpg" class="e-rte-image" alt="dispatch-censored-cropped" width="517" height="292" style="min-width: 0px; max-width: 900px; min-height: 0px; width: 517px; height: 292px;">

Along with e-rte-image, e-img-inline is also another class that gets set into the class of each image uploaded into the editor. Could the classes be a potential issue? I have tried to remove them before but I was unable to do so using the Regex method I have been using before.

Thank you very much for your help and time,

Andrew Sabin
Andrew Sabin 80 Reputation points

2026-08-17T22:51:31.57+00:00

Hey again @Golla Venkata Pavani ,

Your solution with strengthening the CSS values and rendering the MarkupString with the SanitizeImageMarkup method fixed the issue!

Thank you very much for your help!

I have two more small questions before I get going.

1.) Is there a way that I can set your comment as the answer for my question?

2.) Is there a place that I can leave comments or feedback about the help I have been getting with Microsoft Q&A? I just want to let people know that you guys have been doing a wonderful job in helping me with getting my Web App working on Azure through Azure Web App services.

Thanks again,
Andrew Sabin

Answer 1

Hi @Andrew Sabin

Thank you for reaching us regarding the issue.

Looking at the tag you provided

<img src="..." class="e-rte-image" ... width="517" height="292"

 style="min-width: 0px; max-width: 900px; min-height: 0px; width: 517px; height: 292px;">

The combination of the width/height attributes and the inline style is what is preventing the media-query rules from taking effect in production. Inline styles have higher specificity than stylesheet rules, so they win even when you use ::deep and !important. Because the content arrives as a MarkupString, Blazor does not automatically attach the isolation scope attribute to the injected elements. That is why the ::deep rules are required, but they still cannot override an inline style attribute unless the conflicting declarations are removed or the CSS is made strong enough.

Recommended next steps:
1. Strengthen the CSS to target the editor classes

@media (max-width: 768px) {
    .content-description-container ::deep img.e-rte-image,
    .content-description-container ::deep img.e-img-inline,
    .content-review-column ::deep img.e-rte-image,
    .article-body-col ::deep img.e-rte-image {
        display: block !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;   /* overrides the editor’s 900px */
        object-fit: contain !important;
    }
}

2. Sanitize the markup before rendering (most reliable)

Remove the width/height attributes and the width/height-related declarations from the style attribute. This lets the CSS control sizing cleanly, which is the approach recommended when working with untrusted or third-party HTML content.

private string SanitizeImageMarkup(string html)
{
    if (string.IsNullOrWhiteSpace(html)) return html;
    // Remove width and height attributes
    html = System.Text.RegularExpressions.Regex.Replace(
        html,
        @"\s*(width|height)\s*=\s*[""'][^""']*[""']",
        "",
        System.Text.RegularExpressions.RegexOptions.IgnoreCase);
    // Strip width/height (and min/max variants) from the style attribute
    html = System.Text.RegularExpressions.Regex.Replace(
        html,
        @"(style\s*=\s*[""'])([^""']*)([""'])",
        m => {
            var cleaned = System.Text.RegularExpressions.Regex.Replace(
                m.Groups[2].Value,
                @"(^|;)\s*(width|height|min-width|max-width|min-height|max-height)\s*:[^;]*",
                "",
                System.Text.RegularExpressions.RegexOptions.IgnoreCase);
            return m.Groups[1].Value + cleaned.Trim(';', ' ') + m.Groups[3].Value;
        },
        System.Text.RegularExpressions.RegexOptions.IgnoreCase);
    return html;
}

Then render with:

SQL

@((MarkupString)SanitizeImageMarkup(contentRevision.Value.Description))

After deploying either change, do a hard refresh on the Azure site and inspect an image in DevTools (Computed tab). You should see max-width: 100% and width: auto coming from your media query.

Reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-10.0 https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-10.0#raw-html

If the answer is helpful, Please do click "accept” and Yes, this can be beneficial to other community members.

If you have any other questions, let me know in the "comments" and I would be happy to help you

Golla Venkata Pavani 7,440 Reputation points Microsoft External Staff Moderator

2026-08-18T13:24:21.6633333+00:00

Hi @Andrew Sabin

Thank you for your positive response and I am glad! your issue is resolved. If you found my answer is helpful, Please accept the answer. It will be helpful for other community members as well.