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.

diff --git a/src/insets/InsetGraphics.cpp b/src/insets/InsetGraphics.cpp
index b092ff44fff35fe9f47f3fe9476415a10f2b6d14..d4d0fd7049b8565e9ff9b5ea411a1e58810fa5f5 100644 (file)
--- 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 + "' ";