我有一些特定的 div,知道大小。我想用作背景的图片大小不同,所以我想使用 background-size:cover 来确保里面的图片看起来不错,而不是被拉伸或只显示其中的一部分。
但我找不到实现这一目标的方法。这不起作用的另一个原因是我只需要内联分配 background-image 属性。
有没有人知道如何在实际上不是整个视口而只是一个 div 的东西上使用 background-size:cover ?
提前致谢
我有一些特定的 div,知道大小。我想用作背景的图片大小不同,所以我想使用 background-size:cover 来确保里面的图片看起来不错,而不是被拉伸或只显示其中的一部分。
但我找不到实现这一目标的方法。这不起作用的另一个原因是我只需要内联分配 background-image 属性。
有没有人知道如何在实际上不是整个视口而只是一个 div 的东西上使用 background-size:cover ?
提前致谢
试试这些风格:
background-size:contain;
background-repeat:no-repeat;
background-position:50% 50%;
添加具有以下属性的类,将此类与该 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;
编辑:
调整 jsfiddle 中的框架大小,您会观察到图像不会缩小到最小宽度(以百分比设置)以下,而它可以根据可用空间进行扩展
<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%;
}