Image dimension problems

Hosting on Micro.blog
1

Apologies if this is covered elsewhere.

I’m trying to include an image in a post with specific width and height values. The preview window displays the post as expected, but when published and viewed online the image appears to ignore the dimensions and displays at full width. Uploading a smaller image doesn’t appear to help, the image then displays full width at a lower resolution.

First time asking for help, again apologies if I’ve omitted anything.

Thanks

2

This is very possibly specific to your site theme and the CSS there. Could you link to your site and a post?

3

Thanks for taking a look.

1 Like
4

Your theme’s CSS has the following:

article img, .e-content img, .p-summary img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

So that will always take up all of the width. You would want to edit the CSS to set max-width: 100% instead so that if you have an image whose resolution is smaller than the container, it won’t stretch.

2 Likes
5

Thank you, appreciated.

6

@jsonbecker The CSS edit worked great in the most part, I notice that there’s still an anomaly with the archive section when viewed on a phone - the images extend beyond the width of the screen. Is there a parameter that can be included in the CSS for the ‘archive’ page to limit the image width when viewed on a smaller screen.
https://theretiredparamedic.micro.blog/archive/

Thank you.

7

yes-- on the archive page, you don’t have .p-summary class, so the CSS above doesn’t apply and there’s a separate img { width: 100% } somewhere in your file. I’d probably go to the parent img selector in your css and set max-width" 100% there, but you can also do a more specific target like the above:

.archive img {
  max-width: 100%;
}

I think that should work.

1 Like
8

That’s done the trick, thank you.