HOW TO FIT IMAGES IN YOUR POST USING MARKDOWN

Every day you are including images in your posts, ok, that is great!

But what if you could give a pro look to your posts just fitting your images in a new way? That would be even better!

I am not a coder, and I have been looking for how to do this and I did not find a lot of info about it, so when I found it, I decided to share to help other people to know how to do it.

This is what we are going to see now:

1. Inserting a image

This is not a problem, I know, almost everybody in Steemit knows how to do that.

• The simple way is dropping the image to the text box, that is simple.
• The other way is to type : 

After this, we will have our nice image placed at full resolution and centered in our post, ok!
This is the right option to our header image for example.

2. Fitting your image to the left

Now, in the body of the post, it can be very interesting inserting images but instead of using the default option, giving a different touch with an image with a reduced size and in a side of the post.

This option allows you to make comments at the right side of the image.

The code to this option is:

< div class"pull-left" >
Image address
< /div >

< br >
This option allows you to make comments at the right side of the image.
< br >
< br >

• Note that I have inserted blank spaces after and before the "<" and ">" signs to avoid the execution of the code and let you can see it. You must delete the blank spaces if you want the code to run in your post.
• The < br > are to insert lines give more room between other text or images, you can try and see if you need to insert more or less of this.

3. Fitting your image to the right

It is the same like doing it to the left, you only need to change one word:

This option allows you to make comments at the left side of the image.

The code to this option is: ![image.png]

< div class"pull-right" >
Image address
< /div >

< br >
This option allows you to make comments at the left side of the image.
< br >
< br >

If you do not want to cut the body with the image and a comment at the side, you simply can write the text as usual, without any < br >, and the text will surround the image like in this example:


Se denomina tucán a los miembros de la familia Ramphastidae, que se compone de 5 géneros y aproximadamente 42 especies. Se trata de un ave cuyo nombre proviene de la palabra tukana, que a su vez pertenece a la lengua tupí.

This option allows you to make comments at the left side of the image. Es además fácilmente reconocible por su pico largo y colorido; y asociado con la selva y el ambiente tropical. De acuerdo con la especie, el tucán puede medir de 29 a 63 centímetros de largo y pesar de 130 a 680 gramos. Por ejemplo, la especie de tucán más grande es el tucán toco, que llega a medir los 63 centímetros; y uno de los más pequeños es el tucancito verde, que mide de 33 a 36 centímetros de longitud.

That is all!

Use this little tip to do nicer post and to engage with more people in Steemit!

Image sources 1-2, 3
Source

I hope you liked and helped this post, if so, you help me a lot to continue contributing by voting, sharing and following me. Thank you and be happy! :)