Fix image stretching

[geekgonecrazy]

By setting height to 200 you were causing images to stretch. Setting it to a max-height, makes it fit auto resize to fit your max height.

This would fix #543

[rodrigok]

Doing that, messages start to move up and down until all images has loaded and their size was setted.

Another ideia keeping the height of image content fixed?

[rodrigok]

Maybe:

<template name="oembedImageWidget">
    <a href="{{url}}" target="_blank">
        {{#if parsedUrl}}
            <blockquote>
                <div style="background-image: url({{url}}); background-size: contain; background-repeat: no-repeat; background-position: center left; height: 200px;" ></div>
            </blockquote>
        {{/if}}
    </a>
</template>

[geekgonecrazy]

looks like just putting a div around it and doing:

<div style="height:200px;">
   <img src="{{url}}" style="max-width: 100%; max-height: 200px;" />
</div>

Might do the trick.

Are there performance gains from doing css side vs img tag?

[rodrigok]

I didn't remember why we use img instead div with background. Do you remember @engelgabriel?

[geekgonecrazy]

Just realized something. You'll probably want to stick to img. Especially if you do end up implementing #537

Could do something like:

<img data-src="{{url}}" style="max-width: 100%; max-height: 200px;" />

Then clicking what ever button you use you could do something like:

img.attr('src', img.data('src'));

Obviously there are other ways..

[rodrigok]

I don't know, probably we will sove the #537 using a more complex html to render instead the image to show the file type and file size. We can do this changes in click event and changing some flag in message to force re render with the image visible.

[geekgonecrazy]

Ah yeah. I've also gone similar routes on other projects.

Changed to a fixed height div. If css is more performant. I'll gladly make the change. Just trying to help make things look good :)

[rodrigok]

I don't know about the performance impact but I prefer the my suggestion, looks more clean and keep image vertical centered if height is less than 200px.