在 Hugo 中控制图像的宽度、高度和位置

Question

我正在使用 Hugo 创建一个新的博客站点，但我无法理解如何在博客 post 中控制图像的宽度、高度和位置，该博客是用 Markdown 编写并使用 Blackfriday 呈现的。

我尝试将以下原始 HTML 注入 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" />

然而图像仍然被拉伸到 post 的整个宽度。关于如何影响 post 中图像渲染的任何想法？

Answer 1

这可能与 CSS 优先规则有关。如果在主题的其他地方为 img 定义了样式（例如 width: 100%），它将优先于 width/height HTML 属性。

一些参考文献：

要通过少量更改克服它，您可以尝试将这些值包含为内联样式，因为它通常优先于其他情况（除了 !important 指令）。

也值得指定单位（例如 px）。如果不是，按照标准就坏了，浏览器不一定能猜对。

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

在 Hugo 中控制图像的宽度、高度和位置

Controlling image width, height, and placement in Hugo

html

css

hugo