fixed width & height base64 logo in div

OL Connect Professional Designer
1

Hi,

i’m having trouble placing a base64 logo in a div with a fixed width an height.

I managed to get the width set to 200px but the height isn’t possible.

and no, it’s not simply setting the height to 200 px.

it’s importent that the logo keeps it’s proportions.

here’s the code:

<table id=“table_base64” class=“table-no-style” data-column-resize=“” cellpadding=“0” anchor=“page_media_0”
cellspacing=“0”
style=“width: 35mm; position: absolute; top: -257.6333748046875px; left: 465.3493297729492px; height: 67px;” offset-x=“563.616” offset-y=“25.83330000000001”>
<tbody>
<tr>
<td style=“width: 100%; font-size: 10pt; vertical-align: bottom;”>
<img id=“b64img” src=“data:image/png;base64,” width=“200px” style=“width: 100%;”>
</td>
</tr>
</tbody>
</table>

2

You could assign the max-width and max-height properties. The following should work:

<img id="b64img" src="data:image/png;base64," style="max-height: 48px; max-width: 48px;"">

Alternatively you could set the base64 encoded image as background image for the respective table cell via CSS. There are some powerful properties for background images like background-size which can be set to a length or special value like contain and cover (very convenient when the image needs to adapt to the size of the container). See the sample below.

Erik

#your-table-cell {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NDNDOEUyQTZFMjA2ODExODIyQTk4RTgzMjM0RDBBRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxQUJGQkVGQURDMUYxMUUzQjlDQkNERUI5REIyQzk3QSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxQUJGQkVGOURDMUYxMUUzQjlDQkNERUI5REIyQzk3QSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzZDMUM0QTk3QjIwNjgxMTgwODM4NDk5NjIzQUQ3N0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzQzQzhFMkE2RTIwNjgxMTgyMkE5OEU4MzIzNEQwQUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4zNMSTAAABq0lEQVR42uxawU7DMAyt0cSNA+0vwQVp/AE3zvuKcePEB3GpADFQ/2SndQdOwREuZFGSuYuipMWWnlq5a+UX+zmdVVBKVXOwRewDACArgd9E6JMBaK12FYIXLhENMEsLV7e0OgNuRhaei5C5tEYv6Fk1ExMiQqQkIijwVnc46nJj0c4lI0nanHMfKaj9svcREbsQmSCRB8SOjuk7SEKxfyHOET3iYgpirxEbQm34HxF7xFNk9+LtR9b/EfXjUhUHFHhnPLyzyKQgYOIvllOJWCQ667xhZIxD5Oj1KCIOEg0h5BuTsfREPCQGawJZ6kaQSUvEs+q2ubLgylidk8ibGVxglGQG/crwRxM5pf2+I67w5m3gN/raNf0WGP5/+/ar7PjlXUuICJFIIuagwYUjQwXuLLktKSOQ6V5pvyJ2EbuIXcQuYhexi9inIvYdBVdnLvm9MROzbfD1odL6pONdZiKbQBz3dPw4zNHhlGRJadMD6BXikjGsS2E3dhyEFfkUxeoeB1Fg66qc71F8WNuJ8K3yLeKZ6rCU4HuKaemqKIgtj1I+c5rNzv4twABiXuINilDC6AAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-size: 56px;
}