如何在Asciidoctor中为图像设置自定义图像高度？

问题描述

功能请求在https://github.com/asciidoctor/asciidoctor/issues/2542上有所下降，因此请在此处寻找最佳解决方法。

例如在本文档中的Aciidoctor 2.0.10中，我尝试使用[height=200]

设置高度。

main.adoc

:docinfo: private-head

image::https://i.stack.imgur.com/21BFR.png[height=200]

转换为：

asciidoctor main.adoc

即使渲染的HTML包含以下图片，图片也无法使用其height=200：

<img src="..." height="200">

因为由asciidoctor集添加的默认内联head样式：

img{height:auto}

我尝试使用以下方法添加自己的额外CSS来撤消它：

main-docinfo.html

img {
  height: unset;
}

但似乎无法通过进一步的CSS撤消img高度... Remove height auto using css

这些是我能想到的可能性：

• 使用内联样式自定义img输出以强制执行height，我认为有一种机制，但我想知道它是多么具有侵入性

• 复制生成的HTML，从中删除img{height:auto}，然后将其用作模板，例如如How can I add a generic page header with site navigation to an asciidoc document?

  所示

  我最终从这个选项开始，如下所示：https://github.com/cirosantilli/china-dictatorship/commit/8c184abdd9a9ae5ac84a211e339ff9b097e5c55f

• 如果我在图像上添加一个ID并与CSS相匹配，那是可行的，但我真的不想在每张图像的adoc / HTML上重复此ID信息

解决方法

Ascidoctor CSS已设置为维护文档中包含的图像的纵横比。您可以控制宽度，而无需尝试直接控制高度，而是可以自动调整高度以保持所包含图像的形状。

示例中包含的图像的自然尺寸为660x535。要达到（大约）200像素的高度，宽度应为200/535 * 660 = 246像素。

当我将图像的标记调整为：

image::https://i.stack.imgur.com/21BFR.png[width=246]

图像的高度为199.417像素。