Markdown … limiting the width of an image

Elements
21

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

22

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 ?

23

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

24

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)

25

were you expecting this

26

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

27

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 ?

28
29

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

30

is this what you mean

31

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

32

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

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

try this

will be too wide for mobile

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

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 ??

36

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

37

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

38

Fab

39

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

40

Got it !- thanks again Steve !!