文章目录
  1. 1. Defined
  2. 2. HTMLStructure()
  3. 3. CssShows()
    1. 3.1. size image > div.wrapper
      1. 3.1.1. Plan A
      2. 3.1.2. Plan B
    2. 3.2. size image < div.wrapper
  4. 4. text-scroll()
  5. 5. Referer

Defined

Make picture full hover the background without repeat or crop!

SCSS below, not css.

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

HTMLStructure()

1
2
3
4
5
<div class="wrapper">
<div class="text">
Long Text big as 4096bits
</div>
</div>

CssShows()

1
2
3
4
5
.wrapper {
width: 80vw;
height: 80vh;
background-image: url(xxx.png);
}

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.

1
2
3
4
5
6
7
8
9
$wrapperWidth = 80vw;
$wrapperHeight = 80vh;

.wrapper {
width: $wrapperWidth;
height: $wrapperHeight;
background-image: url(xxx.png);
background-size: $wrapperWidth $wrapperHeight;
}

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

So, we need add this css: IE11+ only

1
2
3
4
.wapper{
/* codes */
box-sizing: border-box;
}

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.

1
2
3
4
5
6
7
$picWidth = 250;
$picHeight = 250;
.wrapper {
background-size: contain;
width: ($picWidth*3)px;
height: ($picHeight*3)px;
}

text-scroll()

condition:

1
2
3
4
5
6
$sizeMustBeDecalred = 100px;
.text {
width: $sizeMustBeDecalred;
height: $sizeMustBeDecalred;
scroll: auto;
}

Referer

scaling_background_images | MDN

文章目录
  1. 1. Defined
  2. 2. HTMLStructure()
  3. 3. CssShows()
    1. 3.1. size image > div.wrapper
      1. 3.1.1. Plan A
      2. 3.1.2. Plan B
    2. 3.2. size image < div.wrapper
  4. 4. text-scroll()
  5. 5. Referer