From b3fdcc3a2450f7307e01057300c60660b90fb3b7 Mon Sep 17 00:00:00 2001
From: Alexander Schwartz <alexander.schwartz@gmx.net>
Date: Thu, 27 Dec 2018 16:00:59 +0100
Subject: [PATCH] use 100% 100% instead of 'cover' to avoid cropping due to
 changed aspect ratio of preview

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 16d43ac..b80088f 100644
--- a/README.md
+++ b/README.md
@@ -101,13 +101,16 @@ ReactDOM.render(
   <div style={{
     height: responsiveImage.height,
     width: responsiveImage.width,
-    backgroundSize: 'cover',
+    backgroundSize: '100% 100%',
     backgroundImage: 'url("' + responsiveImage.placeholder + '")'
   }}>
     <img src={responsiveImage.src} srcSet={responsiveImage.srcSet} />
   </div>, el);
 ```
 
+**Tip:** The placeholder will have a slightly different height/width-ratio due to the reduced resolution. 
+Background size *'100% 100%'* will scale it to the height and width of the original image provided to the attributes `height` and `width` of the `div` element.
+The background size *'cover'* would show a slightly enlarged and cropped placeholder that would show a little bit more flicker once the original image is loaded by the `img` element.
 
 ### Options