From 2276202a925cdc81b82104b10dbab47fbde615d0 Mon Sep 17 00:00:00 2001
From: Aaron Ogle <geekgonecrazy@users.noreply.github.com>
Date: Fri, 21 Aug 2015 12:43:50 -0500
Subject: [PATCH 1/3] Fix image stretching

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.
---
 packages/rocketchat-oembed/client/oembedImageWidget.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rocketchat-oembed/client/oembedImageWidget.html b/packages/rocketchat-oembed/client/oembedImageWidget.html
index 3a1501e098a8..21ab78e5a758 100644
--- a/packages/rocketchat-oembed/client/oembedImageWidget.html
+++ b/packages/rocketchat-oembed/client/oembedImageWidget.html
@@ -2,7 +2,7 @@
 	<a href="{{url}}" target="_blank">
 		{{#if parsedUrl}}
 			<blockquote>
-				<img src="{{url}}" height="200" style="max-width: 100%" />
+				<img src="{{url}}" style="max-width: 100%; max-height: 200px;" />
 			</blockquote>
 		{{/if}}
 	</a>

From a3ba55af46c7c37357fb2e88037b1eb422cd1d72 Mon Sep 17 00:00:00 2001
From: Aaron Ogle <geekgonecrazy@users.noreply.github.com>
Date: Fri, 21 Aug 2015 20:48:13 -0500
Subject: [PATCH 2/3] Updated to fixed height containing div

This way area doesn't expand after the image loads causing content to shift.
---
 packages/rocketchat-oembed/client/oembedImageWidget.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/rocketchat-oembed/client/oembedImageWidget.html b/packages/rocketchat-oembed/client/oembedImageWidget.html
index 21ab78e5a758..b46984a64494 100644
--- a/packages/rocketchat-oembed/client/oembedImageWidget.html
+++ b/packages/rocketchat-oembed/client/oembedImageWidget.html
@@ -2,7 +2,9 @@
 	<a href="{{url}}" target="_blank">
 		{{#if parsedUrl}}
 			<blockquote>
-				<img src="{{url}}" style="max-width: 100%; max-height: 200px;" />
+				<div style="height: 200px;">
+					<img src="{{url}}" style="max-width: 100%; max-height: 200px;" />	
+				</div>
 			</blockquote>
 		{{/if}}
 	</a>

From 14f375586aaf410fd0b13c061aae586121b1c4a1 Mon Sep 17 00:00:00 2001
From: Aaron Ogle <geekgonecrazy@users.noreply.github.com>
Date: Fri, 21 Aug 2015 21:20:35 -0500
Subject: [PATCH 3/3] CSS Vertical center as suggested

Suggested by @rodrigok.

Looks much better on small images to be aligned in the center.  Especially if height needs to remain at 200px;
---
 packages/rocketchat-oembed/client/oembedImageWidget.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/rocketchat-oembed/client/oembedImageWidget.html b/packages/rocketchat-oembed/client/oembedImageWidget.html
index b46984a64494..27ca5c3b6773 100644
--- a/packages/rocketchat-oembed/client/oembedImageWidget.html
+++ b/packages/rocketchat-oembed/client/oembedImageWidget.html
@@ -2,9 +2,7 @@
 	<a href="{{url}}" target="_blank">
 		{{#if parsedUrl}}
 			<blockquote>
-				<div style="height: 200px;">
-					<img src="{{url}}" style="max-width: 100%; max-height: 200px;" />	
-				</div>
+				<div style="background-image: url({{url}}); background-size: contain; background-repeat: no-repeat; background-position: center left; height: 200px;"></div>
 			</blockquote>
 		{{/if}}
 	</a>