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.
This commit is contained in:
Thibaut Cuvelier 2024-05-20 01:09:43 +02:00
parent de5f63eeb3
commit f2660d172c

View File

@ -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 + "' ";