Preview Images Shrinking

[pseudology]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

Everything was working good, but suddenly my preview images have started shrinking in my blogs homepage.
Anyone have a solution or face a similar issue?
Also when i run the build on my local host the images dont get cropped, but when i run it on github oages and publish it to my domain, i start seeing the issue.

Operations you have already tried

I have tried changing images, using better cropped images, but everything seems to be fine on my localhost.

Anything else?

No response

[joshjohanning]

Shrinking, meaning some of the image gets cropped? I notice something, and it really depends on what the width of your browser is. Seems to always look the best on mobile.

[tristan-white]

I'm also having this issue, but not sure why. I tried to dig a little, but have not front end experience and decided to look for answers in this repo.

Specifically, my issue is that occasionally images in my posts to not render correctly when clicking the preview image button (ie clicking an image to trigger an event to have it fill the whole screen).

On desktop, when clicking an image, the image only fills part of the preview pane; the rest is whitespace.
On mobile, the image will be too zoomed in.

For examples, see this page. The raw markdown (with bits of html mixed in) is here. Note that the first two pictures (of hotel rooms) render correctly when previewing, while the next image (a picture of a breakfast) does not.

[SoumyaK4]

@tristan-white the breakfast image and other images with errors are actually rendering the whole image
But it's zoomed in for some reason, if you scroll to left or bottom you'll see.

The reason likely the following :

The src url ends with w=2400, which probably makes the images look like that.
Unless you have a huge monitor it will always look zoomed in.

P.S. I'd recommend uploading the files inside the repo and using relative path for src. It keeps the code clean and easy to read.

[tristan-white]

Thanks for the reply - I switched from using hotlinks to local photos and this fixed the problem. Still curious if anyone know the answer: why would switching to local photos fix the problem if the hotlinked photo and the local photo are the same size?

[SoumyaK4]

@tristan-white

The reason :

The src url ends with w2400, which sets the image width to 2400 hence the problem. Unless you have a huge monitor it will always look zoomed in.

I just mentioned it above

[tristan-white]

Sorry thank you yes forgot to mention I tried changing that width to other widths such as 700 and nothing changed. Issues is resolved now though so not a big deal