Base64 图像不会使用任何常用方法缩小

Question

我正在使用 KendoUI 的图表功能，并希望导出生成的构造以显示为缩略图。

我导出的是Base64格式的图片。然后保存。

然后将此数据加载到 div 中，并且需要缩放以适合 div。然而，我已经尝试了绝对所有常见的技术来缩小图像，但它根本不会。

目前我有这样的东西。它是 html 的一部分，用作基诺列表的模板。可能这里有什么东西导致了这个问题，但如果有的话我没找到。

<div id="thumbnailContainer" style="height: 100%; width: 100%;">
   <img id="thumbnail" src="#:imageData#" style="(every technique under the 
   sun tried)"
</div>

其中“#:imageData# 对应于一些 Base64 图像数据（否则会正确显示和加载）

尝试过的技术：

背景尺寸
改为设置容器背景
正在调整img的高度和宽度

jsFiddle

Answer 1

尝试在您的代码中这样做

<img id="thumbnail" src="'data:image/png;base64,' + your_base64_string" style="width:50px;height:250px">

这应该有效。如果它不起作用，那么您的另一个 css.

可能有问题

Answer 2

您没有提到它是 SVG，而不仅仅是一些图像。 SVG 在尺寸方面是 "special"。 SVG 不使用 base64 可能是个好主意，因为它不会保存 space 或给你带来任何好处。诀窍是将 viewBox="0 0 W H" 添加到 <svg> 标签。在您的情况下 viewBox='0 0 2400 1200' 似乎效果很好。如果您坚持使用 base64，则需要在转换之前添加它。

Base64 图像不会使用任何常用方法缩小

Base64 Image will not scale down using any common methods

html

css

base64

kendo-ui

jsFiddle

Demo