构建与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的方法，它会摇滚!!