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

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

Cheers

3 Likes

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

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

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

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.

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.

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

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

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