BUG: Images referenced within pages are not resized to fit the page

[ahmedjama]

Bug Report

Images referenced within pages are not resized to fit the page

Describe the bug

I have updated the theme to the latest commits. In my blog posts there are references to external pictures, and when the images are loaded (specially large images 1920x1280), these are not getting resized appropriately.

To Reproduce

1. Go to https://deploy-preview-23--ahmedjamacom.netlify.app/blog/2019/11/intro-to-azure-devops-pipeline/
2. Scroll down to pipeline picture
3. Scroll down to '....'
4. See error

Expected behavior

The image should ideally be resized to fit the page. I have also tested on Safari on iPhone 13.6 and seeing that link to the pictures are not getting resized.

Screenshots

Environment

• Hugo Version: Hugo Static Site Generator v0.72.0/extended darwin/amd64 BuildDate: unknown
• Browser and Version: Firefox 79.0 (64-bit)
• Platform: Desktop]
• Link to Project: https://raw.githubusercontent.com/ahmedjama/ahmedjama.com/develop/content/blog/2019/11/intro-to-azure-devops-pipeline.md

Additional context

Link to the mardown file: https://raw.githubusercontent.com/ahmedjama/ahmedjama.com/develop/content/blog/2019/11/intro-to-azure-devops-pipeline.md

[Add any other context about the problem here.]

[pacollins]

Thank for a really detailed report (including the MD)!

I thought we had this fixed. I will push an update tonight. Should be as simple as adding max-width: 100%; to the img element.

[pacollins]

You also have an interesting bug by having transparent images for your headers. We should probably add an option to stretch that removes the background image for this edge case.

[ahmedjama]

Thanks @pacollins, pulled down patch-181 and it and the image resizing issue is resolved.

Link to preview,

https://deploy-preview-23--ahmedjamacom.netlify.app/blog/2019/11/intro-to-azure-devops-pipeline/

One unrelated question, If I wanted to remove the image blurring altogether how can I go about doing that?

[pacollins]

Set removeBlur = true in the frontmater of the post. I think I am going to add a config.toml parameter so you can set a default option (since you would use it a lot 😄 ).

[pacollins]

Under .Site.Params, I added the same value.