From aa9bff09b6b4c97c26d49a64537811d49ee0d23c Mon Sep 17 00:00:00 2001
From: Juraj Michalek <juraj.michalek@ysoft.com>
Date: Sun, 28 Dec 2014 09:14:36 +0000
Subject: [PATCH] fix card image scaling problem

---
 css/flippy.css | 10 +++++++++-
 index.html     |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/css/flippy.css b/css/flippy.css
index 6a8e3af..f4c3b57 100644
--- a/css/flippy.css
+++ b/css/flippy.css
@@ -72,8 +72,16 @@ flippy.fancy {
   height: 150px;
 }
 flippy.fancy img {
+  width:auto;
+  max-width:100%;
+  height:auto;
+  max-height:100%;
+  vertical-align: middle;
+}
+.cardHelper {
+  display: inline-block;
   height: 100%;
-  width: 100%;
+  vertical-align: middle; 
 }
 flippy.fancy flippy-front {
   float: none;
diff --git a/index.html b/index.html
index b7b98fc..27dd2a7 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
         </flippy-front>
 
         <flippy-back>
-            <img ng-src="img/cards/{{card.cardId}}.png" ng-show="card.cardType == 'picture'">
+            <span class="cardHelper"></span><img ng-src="img/cards/{{card.cardId}}.png" ng-show="card.cardType == 'picture'"></span>
             <div ng-hide="card.cardType == 'picture'">{{card.card['en-US']}}</div>
         </flippy-back>