background-size：覆盖div而不是背景

Question

我有一些特定的div，知道大小。我想用作背景的图片大小不同，所以我想使用背景尺寸：封面以确保内部的图像看起来很好而不是被拉伸或只显示它们的一部分。

但我找不到实现这个目标的方法。另一个不起作用的原因是我有需要只能内联背景图像属性。

有没有人知道如何使用background-size：覆盖实际上不是整个视口的东西，只是一个div？

提前致谢

Answer 1

尝试以下风格：

background-size:contain;
background-repeat:no-repeat;
background-position:50% 50%;

Answer 2

添加一个具有以下属性的类，将此类与该div一起使用，并确保为保持宽高比，使宽度和高度在另一个div相对的位置内为100％

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 3

修改

调整jsfiddle中的帧大小，您会发现图像不会缩小到最小宽度以下（以百分比设置），而可以根据可用空间进行扩展

http://jsfiddle.net/UQP78/12/

http://jsfiddle.net/UQP78/10/

<div id="bg">
    <img src="http://www.faber04blog.com/wp-content/uploads/2012/08/jquery" alt="">
</div>

#bg {
    position:fixed; 
    top:-50%; 
    left:-50%; 
    width:150%; 
    height:150%;
}
#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:25%;
    min-height:25%;
}

http://jsfiddle.net/UQP78/7/