如何解决如何在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像素。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。