From f2660d172c3f38e2dad1f32d7b3b4d953e2efb8a Mon Sep 17 00:00:00 2001 From: Thibaut Cuvelier Date: Mon, 20 May 2024 01:09:43 +0200 Subject: [PATCH] InsetGraphics: use the `scale` CSS property instead of `width` with percentages. The effect is closer to what LyX offers. Previously, the percentage was of the HTML container (often, the whole page), meaning that images were oversized. Now, the scale is respected in the same way as LyX, but its bounding box is off. Overall, the result is better, but not what users expect. --- src/insets/InsetGraphics.cpp | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/insets/InsetGraphics.cpp b/src/insets/InsetGraphics.cpp index b092ff44ff..d4d0fd7049 100644 --- a/src/insets/InsetGraphics.cpp +++ b/src/insets/InsetGraphics.cpp @@ -1086,15 +1086,17 @@ docstring InsetGraphics::xhtml(XMLStream & xs, OutputParams const & op) const bool const haveheight = !params().height.zero(); if (havewidth || haveheight) { if (havewidth) - imgstyle += "width:" + params().width.asHTMLString() + ";"; + imgstyle += "width: " + params().width.asHTMLString() + ";"; if (haveheight) - imgstyle += " height:" + params().height.asHTMLString() + ";"; + imgstyle += " height: " + params().height.asHTMLString() + ";"; } else if (params().scale != "100") { - // Note that this will not have the same effect as in LaTeX export: - // There, the image will be scaled from its original size. Here, the - // percentage will be interpreted by the browser, and the image will - // be scaled to a percentage of the window size. - imgstyle = "width:" + params().scale + "%;"; + // The `scale` CSS property is supposed to be used for responsive + // designs, but it behaves mostly as LyX. The only problem is that + // the image's bounding box is not scaled. (As opposed to a width, + // which is a percentage of the HTML container: the meaning of the + // percentage is completely different, but the bounding box has the + // right size.) + imgstyle = "scale: " + params().scale + "%;"; } if (!imgstyle.empty()) imgstyle = "style='" + imgstyle + "' ";