我试图设置一个 div 的大小(宽度和高度)以匹配它的背景图像大小,但我无法让它工作。 背景图像大小必须以百分比表示,因为我正在处理一个响应式网站。在较小的屏幕上,背景应完全显示(宽度较小,但仍成比例),并且具有图像的 div 应遵循该大小。
我尝试了背景大小的各种值,例如自动 100%、覆盖、包含等,但没有任何效果。 这里有一个类似的问题:scale div to background image size但它也没有解决我的问题。
如果有人知道该怎么做,我将不胜感激。
编辑: 我做了一个 fiddle 来展示行为:http://jsfiddle.net/osv1v9re/5/ 这条线使背景图像变得如此之小:
background-size: auto 100%;
但如果它被移除,背景将填充适当的宽度,而不是高度。
最佳答案
标签无法适应背景图像大小,您需要使用标签并在高度之间进行选择:div 的自动或 javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
关于css - 使 div 大小适合背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30319743/