How to Change HTML Image Size in Markdown ?

Last Updated : 16 Apr, 2024

In Markdown, you may often find the need to adjust the size of images within your HTML content. Whether you’re working on a blog post, documentation, or any other type of content, resizing images can be crucial for maintaining a visually appealing layout.

Approach

This approach involves directly modifying the <img> tag’s attributes within the Markdown content. You can specify the width and height attributes to adjust the size of the image. Also, Inline CSS styling allows you to apply styles directly to the <img> tag within the Markdown content. You can use the style attribute to define CSS properties such as width and height.

Example 1: Changing HTML image size in Markdown using HTML <img> Tag Attributes.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Using HTML img Tag Attributes</title>
</head>

<body>
    <h3>Changing HTML image size in 
          Markdown using HTML Attributes
      </h3>
    <img src=
"https://media.geeksforgeeks.org/img-practice/prod/courses/542/Web/Content/backend-development_1705400380.webp"
         alt="Example Image" width="400" height="300">
</body>

</html>

Output:

Output

Example 2: Changing HTML image size in Markdown using Inline CSS Styling.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Inline CSS</title>
</head>

<body>
    <h3>Changing HTML image size in 
          Markdown using Inline CSS Styling
      </h3>
    <img src=
"https://media.geeksforgeeks.org/img-practice/prod/courses/586/Web/Content/aws-offline_1705064581.webp"
         alt="Example Image" style="width: 400px; height: 300px;">
</body>

</html>