css - 使 div 大小适合背景图像

Question

我试图设置一个 div 的大小(宽度和高度)以匹配它的背景图像大小，但我无法让它工作。背景图像大小必须以百分比表示，因为我正在处理一个响应式网站。在较小的屏幕上，背景应完全显示(宽度较小，但仍成比例)，并且具有图像的 div 应遵循该大小。

我尝试了背景大小的各种值，例如自动 100%、覆盖、包含等，但没有任何效果。这里有一个类似的问题:scale div to background image size但它也没有解决我的问题。

如果有人知道该怎么做，我将不胜感激。

编辑:我做了一个 fiddle 来展示行为:http://jsfiddle.net/osv1v9re/5/这条线使背景图像变得如此之小:

background-size: auto 100%;

但如果它被移除，背景将填充适当的宽度，而不是高度。

Answer 1

标签无法适应背景图像大小，您需要使用标签并在高度之间进行选择: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;
}