My repo: nataliepjlin/up (github.com)
I want to use the percentage of width to make the image responsive just like the screenshot did.(this was changed in the inspect window)
While using the code on my repository, the rendered image looks like this:
So I change the layout/shortcodes/image.html file line 6,7 to {{ $width:= replace (replace (.Get "width") "x" "%") "px" "%" }} , but it came out as error message of execute of template failed: template: shortcodes/image.html:96:31: executing "shortcodes/image.html" at <$image.Resize>: error calling Resize: strconv.Atoi: parsing "50%": invalid syntax
Also, I tried codes from Responsive Images in Hugo | Adam Wills using {{< img src="images/blog/shop" type="jpeg" alt="" caption="" >}} in my post, but the image didn’t show up.
Is there any modification I can do to fix this? Thanks a lot
The behaviour on your 1st image looks correct.
You requesting 80% width and static height of 504px this is why the image will be deformed.
Omit height value (not recommended) and shall be working, but also depend on how its set in CSS.
Specify img in css with height: auto.
% doesn’t make image responsive, don’t use this approach.
Always set width and height in img tag (preferably with px or vw) and manipulate how this needs to work in CSS
The width and height attribute in an img element are no longer used for the actual dimensions but the image’s aspect ratio. Also, the width attribute is not taking a percentage value put a dimensionless number. Cf the MDN reference on img: <img>: The Image Embed element - HTML: HyperText Markup Language | MDN
