Skip to content

Commit 7e2b467

Browse files
committed
use 100% 100% instead of 'cover' to avoid cropping due to changed aspect ratio of preview
1 parent 2c5fee5 commit 7e2b467

File tree

1 file changed

+4
-1
lines changed

1 file changed

+4
-1
lines changed

README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,16 @@ ReactDOM.render(
101101
<div style={{
102102
height: responsiveImage.height,
103103
width: responsiveImage.width,
104-
backgroundSize: 'cover',
104+
backgroundSize: 100% 100%,
105105
backgroundImage: 'url("' + responsiveImage.placeholder + '")'
106106
}}>
107107
<img src={responsiveImage.src} srcSet={responsiveImage.srcSet} />
108108
</div>, el);
109109
```
110110

111+
**Tip:** The placeholder will have a slightly different height/width-ratio due to the reduced resolution.
112+
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.
113+
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.
111114

112115
### Options
113116

0 commit comments

Comments
 (0)