Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Using ![]() image Markdown results in incorrect image dimensions #777

Open
DanielBaulig opened this issue Dec 19, 2022 · 3 comments
Open
Labels
bug Something isn't working

Comments

@DanielBaulig
Copy link

DanielBaulig commented Dec 19, 2022

Describe the bug 描述你遇到的错误

When using the ![Alt text](image_url.png) Markdown in content in front matter leads to an incorrectly sized image for very large images. The generated CSS results in a scaled down image to be displayed, but the height of the image element itself remains the original height of the image. This appears to be because the layouts/partials/plugin/img.html plugin explicitly renders width and height attributes on the img element. If those are removed, the image scales correctly not blocking out unused whitespace along it's vertical axis.

Screen Shot 2022-12-18 at 5 38 58 PM

Expected behavior 期待的行为

Instead, no explicit width and height should be set on the img element, such that the CSS applied resizing (object-fit: contain and max-width:100%) can free up the vertical space.

Screen Shot 2022-12-18 at 5 39 40 PM

Environment 构建环境

  • OS: macOS
  • Theme version/commit: e9e89a4
  • Hugo version: hugo v0.108.0+extended darwin/arm64 BuildDate=unknown
@DanielBaulig DanielBaulig added the bug Something isn't working label Dec 19, 2022
@DanielBaulig
Copy link
Author

It appears setting height: auto in the .single .content img selector will also resolve the issue.

DanielBaulig added a commit to DanielBaulig/LoveIt that referenced this issue Dec 19, 2022
DanielBaulig added a commit to DanielBaulig/LoveIt that referenced this issue Dec 19, 2022
DanielBaulig added a commit to DanielBaulig/LoveIt that referenced this issue Dec 19, 2022
@jamesdeluk
Copy link

jamesdeluk commented Feb 12, 2023

It appears setting height: auto in the .single .content img selector will also resolve the issue.

I'd been resizing all my images manually - only today I noticed that height was always 2x what it should be. Then I found this post. Works perfectly, thanks!

@gongyho
Copy link

gongyho commented Sep 16, 2023

assets/css/_custom.scss

.single .content img{
  height: auto
}

Works perfectly, thanks!

flydo pushed a commit to forkdo/LoveIt that referenced this issue Jan 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants