How To Change Markdown Image Size

UPDATE: This post was written in Markdown, but now this blog has transition to WordPress, so the code block has messed up. However, you can visit the old version of this blog here, thanks.

I love writing my blog posts in markdowns.

However, modifying images is one of the pain points.

In this article, I’m going to teach you how to resize and position your image as you like by using a bit of HTML.

Don’t worry, I’ll guide you through.

The Problem

The only way to insert images to your markdowns blog post is just this:

![KittyOnACouch](/images/KittyCouch.jpg)

Result:

I know she looks cute, but she is taking up the whole screen! What if you want her in a smaller size?

Resize

Here, with a bit of HTML can take care of that problem for you.

Instead of using ![KittyOnACouch](/images/KittyCouch.jpg), we use the following:
<img src="/images/KittyCouch.jpg" alt="KittyOnACouch" style="max-width: 400px;" />

Code Explain:

The src is short for your source of that kitty image.

An alt is where you put in this – ! [picture description here] ( Link )

The style is how you change the presentation of your image. Here I set it to show a maximum width of 400 pixels – no matter what.

Result:

You can change the max-width to anything you want.

However, notice that I didn’t change max-height here. It is because if you set a definite width and height for an image, it might get scratch out, and you don’t want that.

So preferably either max-width or max-height for your image to keep it at the correct ratio.

Position

You might also want to put your image in the center instead of the default leading side.

You can do it by adding ‘margin: auto;’ after ‘max-with: 400px;’.

Code:

<img src="/images/KittyCouch.jpg" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />

Result:

Great! Now you know the basic way to change the size of your images in your blog post.

Now I want to show you another way to achieve the same result, but arguably better.

Let’s take a look at my preferred way of modifying images in markdowns.

My Preference

Code:

<div style="max-width: 400px; margin: auto">
	![KittyOnACouch](/images/KittyCouch.jpg)
</div>

Result:

As you can see the result is the same as above! But the code seems cleaner.
More importantly, you can still use the default way to insert your image:

![KittyOnACouch](/images/KittyCouch.jpg)

Then, wrap it around with a div (a container, in this context for your image)

<div style="max-width: 400px; margin: auto">![KittyOnACouch](/images/KittyCouch.jpg)</div>

Remember the style=”max-width: 400px; margin: auto”, we have used it in our img?

<img src="/images/KittyCouch.jpg" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />

We are just taking the style modification and applying it to the container that holds the image.

<div style="max-width: 400px; margin: auto">
	![KittyOnACouch](/images/KittyCouch.jpg)
</div>

So, you get the benefits of both! It looks neat too!

Thanks for reading, hope it helps!

Let me know if you have any problems in the comment section below.

Happy writing!