BYBY.DEV
latestiosswiftswiftuicareer𝕏

How to set image size in Markdown

Updated Feb 17, 2024#markdown#html#css

Markdown is a lightweight markup language that is widely used for formatting plain text, commonly used for creating content for the web, such as blog posts, documentation, and README files on platforms like GitHub. It is also used in various note-taking applications and content management systems.

To display an image in Markdown, you often use this very simple syntax:

![alt text](/path/to/image.png)

The problem is Markdown does not have a standard way to change the size of an image. Different Markdown implementations may have different extensions or features to support image resizing, but they are not universally supported or consistent.

One common workaround is to use raw HTML <img> tag to insert an image and specify its basic attributes like width, height, style, and more.

Note that using HTML code in Markdown may not work in some platforms or applications that do not support HTML rendering or sanitization. For example, GitHub does not allow you to use the style attribute in the <img> tag for security reasons. You may also lose some of the benefits of using Markdown, such as simplicity and portability.

Using HTML <img> tag attributes

The HTML <img> tag is used to embed an image into the document. It has two required attributes: src and alt. It also supports some optional attributes, such as: width, height, srcset, sizes, crossorigin, etc.

<img src="/img/contact.png" alt="image" width="300" height="auto">
image

You can also use percentage values instead of pixel values for the width and height attributes, if you want to make the image responsive to the size of the container or the screen.

<img src="/img/contact.png" alt="image" width="50%" height="auto">
image

Using inline HTML with style attribute

The inline style attribute in HTML is used to apply CSS rules directly to an HTML element, without using a separate CSS file or a <style> tag. The inline style attribute can be used on almost any HTML element, and it can contain any valid CSS property and value pairs. You can have as many property-value pairs as you want, separated by semicolons. The inline style attribute will override any style set globally, such as in a <style> tag or an external style sheet.

<img src="/img/contact.png" alt="image" style="width:300px;height:auto;">
image

Using inline HTML with CSS class

The <style> tag is used to define style information (CSS) for a document. It is generally recommended that the <style> tag is placed in the <head> element of the document.

However, you can also place the <style> tag inside the <body> element of the document, or even inside other HTML elements, such as <p> or <div>. This allows you to apply styles to specific parts of the document.

<style>
.custom-image {
  width: 300px;
  height: auto;
}
</style>

<img src="/img/contact.png" alt="image" class="custom-image">
image

Not part of the standard Markdown

Using the syntax supported by specific Markdown renderers not part of the standard Markdown). Keep in mind that the this method might not be supported by all Markdown implementations, as it’s an extension provided by some renderers like Pandoc.

![Image](/img/contact.png =300x200)

When using Markdown for documentation on platforms like GitHub or GitLab, it’s best to check the platform-specific documentation for image sizing options.

share twittersend feedback