# Markdown … limiting the width of an image

**URL:** <https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655>\
**Category:** Elements\
**Created:** [October 11, 2025, 9:40am UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655 "2025-10-11T09:40:42Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 12, 2025, 1:38pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/21 "2025-10-12T13:38:59Z")

</div>

Or do mean you want to actually control all the images sizes from the md file

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 1:41pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/22 "2025-10-12T13:41:38Z")

</div>

Steve - you’ve helped me resolve that - it’s fantastic - thank you !

However, I’m back to where I started yesterday before I started fiddling with image sizes

Now back to desktop …

The images called from markup using ! just show the biggest that they can given the container they’re in. They are just within text - so how do you limit their size then ?

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 1:43pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/23 "2025-10-12T13:43:17Z")

</div>

If you now look on the desktop you’ll see that the image sizes are only restrained at the smallest screen size

> **[Peter Yates, Blog Post](https://www.peteryates.co.uk/2025/blog/blog/post/?item=new_peter_yates_art_prints_available)**
>
> Blog Post | Peter Yates, Artist and Architect, 1920 - 1982

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 1:49pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/24 "2025-10-12T13:49:23Z")

</div>

otherwise they do what they want

Perhaps the only way to do this is to break the images out of the .md file and make a separate container for them ?

But what then if your text is inter-spaced with images ?

Then - All blog posts will have a slightly different format (images in different places)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 12, 2025, 1:49pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/25 "2025-10-12T13:49:27Z")

</div>

were you expecting this

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 1:52pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/26 "2025-10-12T13:52:25Z")

</div>

Nope - I dont wan’t images to go full width (unless on the iphone)

1.) portrait images would then become 2 pages long when viewed on a desktop

and

2.) many of my images are old and low-res and will not look good at full width on desktop

Hence I’d be happy to limit them to say 600px or so

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 1:56pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/27 "2025-10-12T13:56:10Z")

</div>

Hence my conclusion that I must limit the image size (of secondary blog images) when calling them in markdown. (Primary are no problem)

?

but then

… how ?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 12, 2025, 2:01pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/28 "2025-10-12T14:01:39Z")

</div>



---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 2:04pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/29 "2025-10-12T14:04:11Z")

</div>

So – it’s now images called from within markdown that I’m struggling with

Not the primary blog image - but those within a blog (that are typically interspaced with text)

How can markdown say - show this image … but not bigger than this

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 12, 2025, 2:32pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/30 "2025-10-12T14:32:51Z")

</div>

is this what you mean

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 6:07pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/31 "2025-10-12T18:07:58Z")

</div>

Hi Steve - yes, kinda ! That will give me what I’m looking for but it does get somewhat more complicated than I’d hoped.

You’re basically adding html to the markdown to get the image size restrictions you want !?

… In that case - is there no html shortcut (for example) image max-width: 500px ?

Thanks for all your patience guys - I realise A, it’s Sunday and B. I haven’t expressed my needs very succinctly

Jol

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 12, 2025, 6:29pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/32 "2025-10-12T18:29:23Z")

</div>

yes see video, I have not used markdown, not sure if you cant specify height width in the front matter or how you would easier

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 12, 2025, 6:40pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/33 "2025-10-12T18:40:45Z")

</div>

```auto
<img src="/resources/racers.jpg" alt="Alt text" style="width: 500px; height: auto; max-width: 100%;" />

```

try this

will be too wide for mobile

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 12, 2025, 7:15pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/34 "2025-10-12T19:15:59Z")

</div>

```auto
<script src="https://cdn.tailwindcss.com"></script>
<img 
  src="/resources/blog/highland.jpg" 
  alt="Alt text"
  class="w-[320px] sm:w-[500px] h-auto"/>

```

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 7:21pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/35 "2025-10-12T19:21:50Z")

</div>

Steve - you’re a star !!

The second to last one will give me what I want. I’m not sure if it’s best practice - or if perhaps there’s a clever markdown command for limiting an image width - but this works thanks so much … what is the example you gave after that … can you explain what it’s doing ??

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 12, 2025, 7:27pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/36 "2025-10-12T19:27:04Z")

</div>

The second one is tailwind the first width sets your mobile size then sm is the next screen size up sets 500px

You can set the first width to say 380px

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 7:29pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/37 "2025-10-12T19:29:15Z")

</div>

When you say 500 px will be too wide for mobiles …. It’s not really a problem as the text container that the markdown is in (and now also your html) will shrink it to the the right size.

Point is I can now specify my image max width in markdown blogs - regardless of the width of the source image

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 7:31pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/38 "2025-10-12T19:31:17Z")

</div>

Fab

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 12, 2025, 7:38pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/39 "2025-10-12T19:38:56Z")

</div>

> [@upssjw](#):
>
> `/resources/blog/racers.jpg`

just in case you missed it, you have blog in the path, where your images are

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 12, 2025, 7:40pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/40 "2025-10-12T19:40:07Z")

</div>

Got it !- thanks again Steve !!

[Previous page](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655.md?page=1)

[Next page](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655.md?page=3)