Make the pictures smaller in Markdown

[Blumik (Mike)]

Good morning,

When I use Markdown and I want to add an image, I just drag it from the resources directly into the Markdown document. But how can I make the images smaller? What command do I need to enter for that?

Mike

[ben]

do you mean visually smaller, or do you want to resize the actual image?

[Blumik (Mike)]

I have attached a picture here

The pictures fill the entire window.

If you could now get the image half as big and maybe neatly centered or on the left or right, that would be really amazing.

[RichardPhoto (Richard Higham)]

I created a custom HTML component and added some styling, such as:

/* Set max image width for smaller screens and centre in markdown content*/

.markdown-content img {

max-width: 90%;

display: block;

margin-top: 12px;

margin-bottom: 12px;

margin-left: auto;

margin-right: auto;

}




/* Set max image width for larger screens and centre */

@media (min-width: 768px) {

.markdown-content img {

max-width: 600px;

max-height: 600px;

display: block;        

margin-top: 20px;

margin-bottom: 20px;

margin-left: auto;

margin-right: auto;

    }   

}

Obviously, you can change the max sizes accordingly (either a percentage, as I have done for smaller screens or a pixel width and height for larger). Margin-left and margin-right set to auto centre the image.

Then, add the CSS class (in this example, the class is markdown-content) to the markdown container in the advanced section of the inspector.

[Blumik (Mike)]

Unfortunately, I don’t have a field for CSS

[ben]

That doesn’t look correct, have you tried restarting Elements and/or your Mac?

You should see a Classes box in the Advanced group like this:

[Blumik (Mike)]

I’ve found the error: in dark and light mode, the border around the field is not visible – you might be able to adjust that. Without the border, you have no idea where to click inside. I did enter your suggestion, but nothing has changed.