Hello,
I am adding images to my site but am wondering how to prevent the auto-fill/auto expanding. Can they be added and scaled proportionately? Here’s an example. (Image is stretching vertically. Original was rectangle wider than tall.) Thank you!
That’s a CSS issue, Hugo just does what you (your theme) tells it to do:
It’s a bit hard to find without knowing where your screenshot was taken, but what happens is that your image is defined with a width and a height and the browser then skews them into place. What you want is a set width (maybe 100%, based on the CSS around the location of the image) and a height that is set to auto. This way the image is resized to the available width and while keeping existing aspect ratio of the image the height is “fitted”.
Not sure what CSS system you use, but there are things like “cover” (set the image to resize one side to fit the available container and cut off on the other sides) and “fill” (what you seem to have used, which will just size it up to the available space). If that is the case try cover, but expect image subjects that are important to you to be cut off.
Best fix, like described above, and dependent on the available box around it:
img {
width: 100%;
height: auto;
}
For this to work properly the parent element needs to have a defined width or the image might fill out your screen.
1 Like
Okay, thank you. I will look into this!
If you’re using one of the image shortcodes, you could add the img-fluid class.
If you’re using Markdown for images, add to assets/scss/common/_custom.scss:
// Put your custom SCSS code here
img {
max-width: 100%;
height: auto;
}
1 Like
Worked beautifully—thank you!!
Worked great—thanks!
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.