Stinkidog Stinkidog - 1 year ago 68
CSS Question

Base64 Image will not scale down using any common methods

I am using KendoUI's diagram feature, and want to export the resulting construct to display as a thumbnail.

I am exporting the image, which is in Base64 format. This is then saved.

This data is then loaded into a div, and needs to be scaled to fit the div. However, I have tried absolutely every common technique to scale the image down, but it simply will not.

Currently I have something like this. It is a piece of html which is being used as a template for a keno list. There may be something here which is causing the issue, but I have failed to find it if there is.

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


where the "#:imageData# corresponds to someBase64 image data (which correctly displays and loads otherwise)

Techniques tried:


  • Background-size

  • Setting background of container instead

  • Adjusting height and width of img



jsFiddle


Answer Source

You didn't mention it's an SVG, not just some image. SVG is "special" when it comes to sizing. It's probably a good idea not to base64 for SVG since it doesn't save space or gain you anything. The trick is to add viewBox="0 0 W H" to the <svg> tag. In your case viewBox='0 0 2400 1200' seems to work well. If you insist on base64 you need to add it before you convert it.

Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download