html - 构建与 IE8 兼容的可调整大小的图形/图表的问题

Question

现在，我使用纯 html 和 css 制作了一个子弹图。没有使用 javascript/jquery 库。

整个 HTML 页面只有带有大小的项目符号图1000px * 500px（几乎是整页）。在我的应用程序中，我还需要300px * 300px在其他一些新页面中大致显示相同的图表。

现在，我不想为新页面构建另一个更小的图表，我只想能够缩小现有整页版本图表的规模并重用它。我如何实现这一目标？

Answer 1

在 CSS 中：

transform:scale(0.25);         /* IE 10, Firefox */
-webkit-transform:scale(0.25); /* Chrome */
-ms-transform:scale(0.25);     /* IE 9 */

根据需要调整比例系数。

另请注意，如果全尺寸图的宽度类似，则可以使用视口单位，60%但请注意浏览器支持目前非常低。

transform:scale(calc(300px / 60vw));

Answer 2

为了让它在 IE8 上工作，我无法使用Kolink建议的转换比例方法，因为它不受支持。所以我不得不完全编辑大图表的副本以缩小它的大小。如果您使用的是 Chrome/Firefox/IE9+，请使用Kolink 的方法，它会很棒！