#1

Is there a way to align, scale and put images right next to text?

Cheers

3 Likes
#2

No, not directly. There are a couple workarounds:

  1. You can use an <img> html tag if the image is hosted publicly (not a local file).
  2. You can use custom CSS to style all images.

Here’s a related feature request you might want to look over https://forum.obsidian.md/t/resize-embedded-content/877

3 Likes
#3

Thanks, that was useful to some extent.
I adopted the custom CSS as seen below and came up with the idea to use a table to display the text right next to the picture.
In principle this works, but the more text I type in cell 1, the more the table and the picture in cell 2 scale undesirably.

My question now: Is there a way to fix the column size of the table? Or some other workaround?
As requested here as well: Ability to resize columns in tables

First Header | Second Header
------------ | ------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column

.

.markdown-preview-view img {
 
  display: block;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: auto;
  margin-right: auto;
  width: 40%;  /* experiment with values */
  transition:transform 0.25s ease;
}

.markdown-preview-view img:hover {
    -webkit-transform:scale(1.8); /* experiment with values */
    transform:scale(2.35);
}
1 Like
#4

Your options are similar. Write html manually with style attributes or custom CSS that applies to all tables.

#5

Unfortunately I can’t really code, I just adopt and adapt the stuff I find here.
I was looking for something over on https://www.w3schools.com, but didn’t find anything regarding locked column size.

Do you have a resource or a concrete idea how such custom CSS would look like?

/edit: Think I found something. Reporting back in a second.

#6

Hm yea, I just added

table {
  table-layout: fixed;
  width: 600px;
}

which fixes the issue.
The problem is this does not work well with the image downscaling used in the “zoom picture when hovering” custom css.

Anyways, thank you.

#7

You can target the embed preview with .markdown-embed, so your CSS might look like this:

.markdown-embed table {
  table-layout: fixed;
  width: 300px;
}
#8

I see, that’s generally useful to know, but I meant something different, sorry for not expressing myself in greater detail.

With the custom CSS snipped, which scales images to a certain percentage, inside the table the image is being downscaled as well, which is not really optimal.
I have a hard time imagine a workaround for this. Something like 100% scale in tables, everywhere else 40%. Correct me if I’m wrong.

Greetings