How to set a custom image height for an image in Asciidoctor?

Question

Feature request semi-declined at: https://github.com/asciidoctor/asciidoctor/issues/2542 so looking for the best workaround here.

In Aciidoctor 2.0.10 for example in this document, I try to set the height with [height=200]

main.adoc

:docinfo: private-head

image::https://i.sstatic.net/21BFR.png[height=200]

converted with:

asciidoctor main.adoc

the image does not get its height=200 used even though the rendered HTML contains:

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

because the default inline head style added by Asciidoctor sets:

img{height:auto}

I tried to add my own extra CSS after to undo it with:

main-docinfo.html

img {
  height: unset;
}

but it seems that it is impossible to undo an img height with further CSS... Remove height auto using css

These are the possibilities I can think of:

• customize img output to enforce height with an inline style, I think there was a mechanism for that, but I wonder how invasive it is

• copy the generated HTML, remove the img{height:auto} from it, and then reuse that as a template, e.g. as shown at: How can I add a generic page header with site navigation to an asciidoc document?

  I ended up starting with this option as shown at: https://github.com/cirosantilli/china-dictatorship/commit/8c184abdd9a9ae5ac84a211e339ff9b097e5c55f

• if I add an ID to the image and CSS to match it up, that would work, but I really don't want to duplicate this ID information on the adoc/HTML for every single image

Lixiviate

Answer 1

The Asciidoctor CSS is setup to maintain the aspect ratio of images included in your document(s). Instead of trying to control the height directly, you could control the width, and the height would automatically adjust to maintain the shape of the included image.

The image included in your example has a natural size of 660x535. To get (approximately) 200px tall, the width should be 200/535*660 = 246px.

When I adjust the markup for the image to:

image::https://i.sstatic.net/21BFR.png[width=246]

The height of the image is 199.417px.

Cirilla

That is a possible workaround worth knowing. But I think I'd rather just hack their CSS rather than do ratio calculations for each image :-) – Lixiviate

Instead of hacking the Asciidoctor CSS, why not add a role to images that need specified heights, and then add javascript to dynamically adjust the style used to match the height attribute? That would avoid a lot of unintended consequences of modifying the CSS to achieve this specific goal. – Cirilla