Skip to content

Commit

Permalink
use 100% 100% instead of 'cover' to avoid cropping due to changed asp…
Browse files Browse the repository at this point in the history
…ect ratio of preview
  • Loading branch information
ahus1 committed Dec 28, 2018
1 parent 2c5fee5 commit b3fdcc3
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit b3fdcc3

Please sign in to comment.