Controlling image width, height, and placement in Hugo

Question

I'm using Hugo to create a new blog site and am having trouble understanding how to control the image width, height, and location within a blog post written in Markdown and rendered with Blackfriday.

I tried injecting the following raw HTML into the post:

<img src="https://social-ruminations.typepad.com/.a/6a00e553d6f3d488330120a5b5862c970b-pi" style="margin: 0px 5px 5px 0px; float: left;" width="100" height="149" border="0" />

and yet the image still gets stretched to the full width of the post. Any ideas on how I can influence the rendering of the image in the post?

Answer 1

This might be related to CSS precedence rules. If a style is defined for img somewhere else in the theme (e.g. width: 100%), it will take precedence over the width/height HTML attributes.

Some references:

• Precedence in CSS
• Presentational Attributes vs Inline Styles

To overcome it with little change, you may try including those values as an inline style, as it usually takes precedence over the other cases (apart from !important directive).

Also worth specifying the units (e.g. px). If not, it's broken according to the standard, and the browser might not be able to guess the right thing.

<img src="..." 
     style="margin: 0px 5px 5px 0px; float: left; 
            width:100px; height:149px; border:0" />