## Defined

Make picture full hover the background without repeat or crop!

SCSS below, not css.

Core CSS:
background-size: [cover, contain, (width, height)]

## CssShows()

with size condition, list two types below:

### size image > div.wrapper

#### Plan A

.wrapper css
background-size: cover;

But
this way may cause the crop of the picture, so the div size should be the
same proportion with the background image.

Drop this.

#### Plan B

Just with size same as the div.wrapper.

Seems good, But if adding the padding, not good enough: the image became smaller!

So, we need add this css: IE11+ only

Or, we must caculating the width and height by self.

### size image < div.wrapper

CSS provide a nice attribute for us: contain;
Picture will scaling to the original size if the div big enough.
But
If div’s size is much bigger that picture, the picture will repeat for several times.

Resolution here. PS: The premise is we need know the size of picture before.

condition:

## Referer

scaling_background_images | MDN