# Markdown … limiting the width of an image **URL:** \ **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:** 1
**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 11, 2025, 9:40am UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/1 "2025-10-11T09:40:42Z")
Markdown I think I’m understanding that markdown isn’t going to give me responsive images and this is throwing my formatting out when viewed on my iPhone. example here > **[Peter Yates Blog](https://www.peteryates.co.uk/2025/blog/)** > > Peter Yates Blog | Peter Yates, Artist and Architect, 1920 - 1982 so I’m looking for a solution perhaps … limiting the width of an image to 500px … can anybody give me a **simple** solution for my example markdown below : ![Chevet de Notre Dame - Peter Yates ©1980](blog/chevet\_de\_notre\_dame\_painting\_by\_peter\_yates.jpg “Peter Yates Chevet de Notre Dame”) _\*Chevet de Notre Dame - Peter Yates ©1980\*_ ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [October 11, 2025, 12:34pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/2 "2025-10-11T12:34:54Z")
The image should scale down to the size of the container, so I’m wondering how you have the project setup… Perhaps share your project via Elements Cloud and we can take a look? ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [October 11, 2025, 6:16pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/3 "2025-10-11T18:16:47Z")
just from looking at the code of the page, it seems you have a pixel width set on the Image of 380px. Set the Image width to whatever you need, this can even be overridden across devices 🙂 ![CleanShot 2025-10-11 at 20.15.13@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/1/211674d89a628ef04525c80552a8cd3dfec13a38.png) ---
**Author:** ![PLM](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/plm/32/31094_2.png) [@PLM](https://forums.realmacsoftware.com/u/PLM)\ **Post date:** [October 11, 2025, 9:28pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/4 "2025-10-11T21:28:42Z")
What is the difference between 100% and Auto? @ben ---
**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, 8:33am UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/5 "2025-10-12T08:33:49Z")
Thanks guys - they’re inside a flex, so I’d expect them to be automagically responsive I’m sure I’m just making a silly mistake … please take a look when you have a mo. Many thanks, Jol elementsapp://downloadDocument/k7gDvVB83H7l ---
**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, 9:50am UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/6 "2025-10-12T09:50:36Z")
I’m also struggling with my blog’s ‘top menu’ - any suggestions gratefully received ! Jol : ) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 12, 2025, 10:31am UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/7 "2025-10-12T10:31:54Z")
> [@PLM](#): > > What is the difference between 100% and Auto? 100%: will stretch the image to fill the available space in the parent, if the image is not naturally large enough already. Or shrink it if it’s to large naturally. Auto: will shrink the image if its to large naturally, but will not stretch it to fill the available space in the parent if it not already naturally that wide. EDIT: Having said that.. Elements does not work like this, as the sizing you define in the image component are not applied to the image it’s self, they are applied to the parent div, so milage may vary. ![CleanShot 2025-10-12 at 11 .43.21@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/3/534fcd67728fcfb2f392d5821ea5290635680f96.png) ---
**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, 10:41am UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/8 "2025-10-12T10:41:30Z")
my iPhone, looks like your image is wider than the page? or that screen size only, image is pixels? ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/7/27e8dc1efa9905c249579b995576e5072df71027.jpeg) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [October 12, 2025, 11:28am UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/9 "2025-10-12T11:28:14Z")
@jbob you’re setting a pixel width on some of your images. When you do this it forces the image to be that width, even if the screen size is smaller. This is why you’re getting issues. ![CleanShot 2025-10-12 at 12 .24.38@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/6/a6047a6508db8a0b01a09975b87260cf41bb69ca.jpeg) I’d recommend never setting a pixel value on images, not if you want your site to be responsive and just work on all screen sizes. You’re better off seeing it to “Auto” or setting a % value. Hope that helps. ---
**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, 12:45pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/10 "2025-10-12T12:45:32Z")
OK - I’m gonna try that … thank you so much Dan !! ---
**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, 12:53pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/11 "2025-10-12T12:53:49Z")
I’ve tried assigning no size to the primary image on the blog and on the post page It doesn’t help On my (iPhone 13) - the header makes it most the way across the screen and the lower image goes off page to the right I’m prolly doing something else that’s stoopid ? ![Peter Yates Blog Post Peter Yates, Artist and Architect, 1920-1982](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/4/e47319067df518dbcadc29b527689d4846331ecc.jpeg) ---
**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:06pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/12 "2025-10-12T13:06:15Z")
So image size must be set to 100% in order to fit to the container / flex ? ---
**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:10pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/13 "2025-10-12T13:10:30Z")
on my desktop, I use dark mode all the time, didn’t notice these until your post above ---
**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:12pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/14 "2025-10-12T13:12:23Z")
Thank you - Dark mode will be my next battle Steve : ) ---
**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:14pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/15 "2025-10-12T13:14:51Z")
not sure if this helps ---
**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:16pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/16 "2025-10-12T13:16:54Z")
Think you’re onto something Steve !! ---
**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:20pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/17 "2025-10-12T13:20:58Z")
Tailwind units are 4px - so padding 5 = 20px, both sides = 40px, image in pixels plus padding = ? more than the width of the screen?, this is without responsive control eg padding 40px + 400px (image) = 440px ---
**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:23pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/18 "2025-10-12T13:23:31Z")
you can set different % for each screen size as well ---
**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:30pm UTC](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655/19 "2025-10-12T13:30:53Z")
OK - some progress made here - but my original question is still … Like on the following page … if you’re calling images within your markup post - naturally they’ll be width that you set the post - unless you say otherwise, so how do you say otherwise. The markup blog is calling an image using ! whatever - but is displaying it as big as it can within the post container. Sure you can control the size of the ‘featured image’ - but what about images you’re calling within the post ? > **[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 In the example - we control the featured image just fine - but the other images will just be the size they are (unless we somehow specify that in Markup !?? … or am I misunderstanding something ---
**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/20 "2025-10-12T13:38:16Z")
Working on my iPhone now, not sure what you are trying to say [Next page](https://forums.realmacsoftware.com/t/markdown-limiting-the-width-of-an-image/51655.md?page=2)