使背景图片完全适合 div
Fit background image to div completly
我已经查看了一些示例,例如 example
我尝试了不同的方法 background-size
将其更改为 cover or contain
但是我怎样才能实现背景图像应该覆盖整个 div
在这里您可以看到更新后的 jsfiddle,其中背景图片没有覆盖整个 div
将contain
替换为fill
或``...像这样
但是要知道,当使用 fill 时,图像会被稍微裁剪...
//background-size:fill;
//background-size:cover;
使用 background-size:cover; 而不是 background-size:contain;
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
border: 1px solid;
background-size:cover;
/*background-size:contain;*/
}
<div id="imagecontainer">
hi
dadsa
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div>
dasd
asd
as
d
asd
asd
</div>
@gave up 现在检查。我在其中添加了一些css 属性。
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
border: 1px solid;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div id="imagecontainer">
hi
dadsa
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div>
dasd
asd
as
d
asd
asd
</div>
你可以试试改background:contain
background-size:fill;
或
background-size:cover;
整个div都覆盖了背景图。
缩放背景图片以适应 div:
background-size: contain;
缩放背景图片以覆盖整个div:
background-size: cover;
另外,background-repeat: round
提供了最好的结果。不过暂时只对Chrome有效。
我已经查看了一些示例,例如 example
我尝试了不同的方法 background-size
将其更改为 cover or contain
但是我怎样才能实现背景图像应该覆盖整个 div
在这里您可以看到更新后的 jsfiddle,其中背景图片没有覆盖整个 div
将contain
替换为fill
或``...像这样
但是要知道,当使用 fill 时,图像会被稍微裁剪...
//background-size:fill;
//background-size:cover;
使用 background-size:cover; 而不是 background-size:contain;
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
border: 1px solid;
background-size:cover;
/*background-size:contain;*/
}
<div id="imagecontainer">
hi
dadsa
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div>
dasd
asd
as
d
asd
asd
</div>
@gave up 现在检查。我在其中添加了一些css 属性。
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
border: 1px solid;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div id="imagecontainer">
hi
dadsa
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div>
<div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div> <div>
dsa sad sadasd sa
</div>
dasd
asd
as
d
asd
asd
</div>
你可以试试改background:contain
background-size:fill;
或
background-size:cover;
整个div都覆盖了背景图。
缩放背景图片以适应 div:
background-size: contain;
缩放背景图片以覆盖整个div:
background-size: cover;
另外,background-repeat: round
提供了最好的结果。不过暂时只对Chrome有效。