CSS組版の面白さは、本来別の用途で作られたCSSのプロパティが、本の組版にピタッとはまる瞬間にあると思います。
ただし、はまらないものもあり、その1つが画像サイズの指定です。一般的にDTPソフトでは、画像のプリントサイズ（画素数×dpiで求められる物理寸法）を100%として、パーセンテージで指定します。
それに対してCSSで%指定といえば、親要素を100%とした指定です。もしくは物理寸法のミリやインチなどの指定になります。
これがどう問題になるかというと、CSSで50%と指定した場合、次のようになります。元の画像サイズと関係なく、同じ大きさになってしまいます。
DTP的（というかIT書的？）には、本来の画像サイズを保って次のように貼りたいのです。
HTML側のwidth属性で調整すれば近いことはできるのですが、画像ごとに計算が必要になってしまいます。
<img src="c1.png" width=400>
{width=400}
うちのようにIT書ばかり作っている環境では作業効率を大きく左右するので、Vivliostyle利用ツール（MDBP）に機能を加えて、画像を加工する機能を持たせています。
https://github.com/libroworks/mdbp-vscode
Markdown記法を使って次のように書くと、
通常ならこういうHTMLになりますが
<img src="img0/c2.png?svgimg=35,118,60">JavaScriptで変換して、次の形に変換します。
<svg width="118mm" height="60mm" viewBox="0 0 118 60">
<image width="451.203" height="239.889" xlink:href="img0/c1.png" transform="translate(0,0) scale(0.35)"></image>
</svg>インラインSVGを利用しているので、svgimgと呼んでいます。
URLのパラメータ記法（GETメソッドでフォーム送信したときに使われる「?キー=値」の形式）を使って、他のMarkdown、HTML記法に影響が出ないようにし、
?svgimg=倍率,幅,高さ,xシフト量,yシフト量の形式で指定します。倍率以外の単位はミリです。
第2パラメータ以降は省略できるので、状況に応じて使い分けると理解しやすいです。
サイズ指定のみ 35%
幅も指定 35%で幅118ミリ
高さも指定 35%で幅118ミリ、高さ70ミリ
Yシフト量も指定 35%で幅118ミリ、高さ53ミリ、Y方向に-28ミリ
何年も前に書いたものなので、実装はよく覚えていないのですが、画像解像度を72dpiとみなして（Adobe製品の標準dpi）加工しています。
下記コードの230行目あたり
https://github.com/libroworks/mdbp-vscode/blob/main/lib/markdown-book-preview-convert.js
うちではCSS組版を使って原稿整理していても、最終的にInDesignで組むことが多いので、svgimgで指定した内容はXMLを介してInDesignに取り込み、スクリプトで自動的にサイズ指定が反映されるようにしました。