Restricting Height & Width of an img in kb article

[Krutika Valanj2]

Is it possible to restrict the img size in kb article(article body)

I want the img height & width to be 500px x 500px. If the user uploads an img more than this size it should automatically resize to 500x500

[Berin]

Hi Krutika, I've achieved this in the past by adding "max-height" and "max-width" css atrributes to the Service Portal.  Where are you trying to format the article? (In a portal, workspace, fulfiller ui16 view, etc?)

[Krutika Valanj2]

Hello @Berin I am trying to format the article in portal. Can you help me where exactly did you make changes

[Berin · Accepted solution]

You can add CSS at the widget, page or theme level.  I prefer to use a CSS Include at the theme level because it keeps all my code together, but this is a personal choice.  Here's some example CSS for setting the max height and width of images in knowledge articles:

.kb-article-content {
    img {
        max-width: 500px;
        max-height: 500px;
    }
}

The above code will limit the height and width to 500px, but if a user uploads a smaller image, it won't expand to be 500px. Also, the image will maintain its aspect ratio, so if it isn't square, then it won't display at the full 500x500.  If it's important that your images display at exactly 500x500, then the following CSS will achieve that.  (I've assumed that you don't want the image to distort by stretching, so have added a grey background to fill any extra space.)

.kb-article-content {
    img {
        height: 500px;
        width: 500px;
        object-fit: contain;
        background-color: grey;
    }
}

[S Goutham]

Hey @Krutika Valanj2 :

You cannot restrict the height and width of the image getting uploaded it's auto-generated from the source file selected but you can manually adjust it to that width and height by unlocking.  

Scaling an image to some exact limit might have implications of images getting distorted so it is not recommended!