How to divide image width in 2 markdown
Want to place two images side by side in Markdown? There are a few simple ways to do this, depending on the type of Markdown you're using. Here are some handy techniques to get you started:
Markdown gives you the flexibility to use HTML, which can be helpful for more complex layouts. Here’s a quick example:
<div style="display: flex; justify-content: space-between;">
<img src="image1_url" style="width: 48%;" />
<img src="image2_url" style="width: 48%;" />
</div>
In this example, we use a div with a flexbox layout to arrange the images horizontally, giving each image roughly half the space.
If your Markdown processor supports it, you can directly set the width in the image syntax:
`{width=50%} {width=50%}`
This approach will display both images at 50% of the available space. Keep in mind that not all Markdown processors support this syntax, so it may not work everywhere.
in Obsidian Editor，this syntax is valid and worked fine
For those using R Markdown, you can control image sizes using chunk options like this:
{r, fig.show='hold', out.width='50%', fig.align='default'}
knitr::include_graphics("image1_url")
knitr::include_graphics("image2_url")
This method will show both images side by side, each taking up half of the output width.
- HTML Flexbox: Use HTML to arrange images with precise control using
display: flex;. - Markdown Width Attributes: Add
{width=50%}to your image syntax (if supported). - R Markdown: Use
out.widthin R code chunks for side-by-side display.
These easy methods will help you show images side by side in your Markdown documents, making your content look more engaging and visually appealing. Give them a try and see which one works best for your project!