I know that you can write something like:

#+attr_html: :width 250 px

But what if I have them inside of a table like:

| [[./linl/to/image.jpg]] | [[./linl/to/image2.jpg]] |

Alternatively, is there another way to visualize images side by side in org mode?


Assuming you are happy with just HTML export and that all the images in the table should have the same width, you can use CSS:

#+HTML_HEAD:  <style> td img {width: 250px;} </style>

It's a blunt instrument but if you don't ask too much of it, it can work. If you are trying to tweak each image differently, I think the best you can do is edit the HTML file to change:

<td class="org-left"><img src="./img/image1.jpg" alt="image1.jpg" /></td>


<td class="org-left"><img src="./img/image1.jpg" alt="image1.jpg" width="250px" /></td>

I don't know of a way to add a distinguishing id to each image so you can target your CSS to each image and tweak it.

I don't know of a generic way to deal with side-by-side images in all backends (other than the table method you are using).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.