Resize Images in HTML with C#

Resize Images in HTML with a .NET API

Aspose.HTML for .NET loads an HTML file into an HTMLDocument so a C# application can update image sizing through the DOM. Select an HTMLImageElement , set its intrinsic width and height, add responsive CSS when required, and save the modified HTML.

This operation changes how the browser or renderer displays the <img> element. It does not resample the source image, change its pixel dimensions, or reduce its file size.

Set Image Dimensions and Responsive CSS

The following example loads input.html, selects an image with the hero class, records its intrinsic 1200 × 800 dimensions, and prevents it from overflowing a narrower container. Because CSS uses height: auto, the displayed image keeps its aspect ratio as its width changes.

using Aspose.Html;

// Load the source HTML file
using HTMLDocument document = new HTMLDocument("input.html");

// Select the image to resize
HTMLImageElement image = document.QuerySelector("img.hero") as HTMLImageElement;

if (image != null)
{
    // Record the image's intrinsic dimensions
    image.SetAttribute("width", "1200");
    image.SetAttribute("height", "800");

    // Scale the displayed image within its container
    image.Style.SetProperty("max-width", "100%");
    image.Style.SetProperty("height", "auto");
}

// Save the modified HTML document
document.Save("output.html");

Steps to Resize an Image in HTML with C#

1. Load the source HTML file with an HTMLDocument constructor.
2. Locate the required <img> element with QuerySelector() and cast it to HTMLImageElement.
3. Set the intrinsic width and height attributes to values that match the source image’s aspect ratio.
4. Use Style.SetProperty() to add responsive sizing rules such as max-width: 100% and height: auto.
5. Call Save() to write the updated HTML document.

Image Sizing Layers in an HTML Document

• Element attributes. Use SetAttribute() or HTMLImageElement members to update values stored directly on the <img> element.
• Inline presentation. Use image.Style.SetProperty() when sizing rules should travel with one element in its style attribute.
• Shared CSS. Update a class rule or stylesheet when multiple images should follow the same sizing behavior without repeating inline declarations.
• Responsive source markup. Update srcset, sizes, <picture>, and <source> elements when the document provides different resources for viewport sizes or pixel densities.
• Conversion settings. Configure the target device and save options when the dimensions belong to a rendered PDF or raster output rather than an HTML image element.
• Value syntax. HTML width and height attributes use integer pixel values without units, while CSS declarations accept units, percentages, calculations, and responsive constraints.

To create and preview an <img> element interactively, use the HTML Image Code Generator . To add a new image before sizing it, see Add Images to HTML .

Image Sizing Documentation and API Reference

Read How to Add Image to HTML for image-element examples that include width and height attributes. The HTMLImageElement reference covers image properties and inherited DOM members, while ICSSStyleDeclaration describes methods for updating inline CSS. For changing output dimensions during document conversion, see Resize a Document .

Get Started with Aspose.HTML for .NET API

Install Aspose.HTML for .NET from NuGet with the .NET CLI:

dotnet add package Aspose.HTML

You can also use the NuGet Package Manager UI or run Install-Package Aspose.HTML in the Package Manager Console. See the installation guide for setup details, or request a temporary license to evaluate the API without evaluation limitations.

Resize Images in HTML FAQ

1. Does changing an image’s width and height resize the source file?

No. HTML attributes and CSS change the image’s displayed dimensions. They do not alter the source file’s pixel dimensions, encoding, compression, or file size.

2. How do I preserve an image’s aspect ratio in HTML?

Set intrinsic width and height values that match the source image’s proportions. For responsive display, control the width with CSS and use height: auto so the browser calculates the corresponding height.

3. Should image dimensions be set with HTML attributes or CSS?

Use width and height attributes to provide intrinsic dimensions and reserve layout space. Use CSS to control presentation, fixed display sizes, maximum widths, and responsive behavior. The two approaches can be used together.

4. Can Aspose.HTML make an image responsive?

Yes. A C# application can update the image’s inline style or a stylesheet with rules such as max-width: 100% and height: auto. It can also set srcset and sizes when the document provides multiple image resources.

5. How do I reduce an image’s pixel dimensions or file size?

Process the source image with an image-editing or image-processing library, save the optimized file, and then update the HTML src if its path changes. Editing the <img> element alone does not modify the image data.