如何制作内容与背景图像高度相同的 div（没有 JS）？答案

【问题标题】：How can I make a div with content the same height as its background image (without JS)?如何制作内容与背景图像高度相同的 div（没有 JS）？
【发布时间】：2015-07-29 05:19:37
【问题描述】：

我有一个带有背景图片的 div：

    <div class="medium-12 large-12 columns featured-spotlight-container" style="background-image: url(@Model.ImageUrl);">
        <div class="medium-6 large-6 columns spotlight-content">
            <a href="@url">
                <h2>@Model.Title</h2>
            </a>
            <p>@Model.Description</p>
            <a href="@url" class="small button"><i class="fa fa-chevron-right fa-2x"></i><span>@Model.ButtonText</span></a>
        </div>                      
    </div>

我希望 div 足够高以显示完整的背景图像。这是我尝试的第一个解决方案，基于我找到的另一个 stackoverflow 答案here：

    <div class="medium-12 large-12 columns featured-spotlight-container" style="background-image: url(@Model.ImageUrl);">
        <div class="medium-6 large-6 columns spotlight-content" style="position:absolute;height:auto;">
            <a href="@url">
                <h2>@Model.Title</h2>
            </a>
            <p>@Model.Description</p>
            <a href="@url" class="small button"><i class="fa fa-chevron-right fa-2x"></i><span>@Model.ButtonText</span></a>
        </div>     

        <div class="medium-12 large-12 columns" id="feature-size" style="padding:0 !important; visibility:hidden;">
            <img src="@Model.ImageUrl" />
        </div>                  
    </div>

我将绝对定位放在 Spotlight-content div 上，否则图像将堆叠在 Spotlight-content 下方，而不是 Spotlight-content 浮动在其顶部。

但是，当我有足够的文本以使 Spotlight-content 的高度大于背景图像时，就会出现问题，因为使用绝对定位，框的大小不会随 Spotlight-content 扩大：

我也试过用javascript设置高度：

    <div class="medium-12 large-12 columns featured-spotlight-container" style="background-image: url(@Model.ImageUrl);">
        <div class="medium-6 large-6 columns spotlight-content" style="position:absolute;height:auto;">
            <a href="@url">
                <h2>@Model.Title</h2>
            </a>
            <p>@Model.Description</p>
            <a href="@url" class="small button"><i class="fa fa-chevron-right fa-2x"></i><span>@Model.ButtonText</span></a>
        </div>                                 
    </div>
    <div class="medium-12 large-12 columns" id="feature-size" style="padding:0 !important; visibility:hidden;">
        <img src="@Model.ImageUrl" />
    </div> 

<script>
    var imgHeight = $("#feature-size").height();
    var containerHeight = $(".featured-spotlight-container").height();
    if (containerHeight < imgHeight) {
        $(".featured-spotlight-container").height(imgHeight);
    }
    $("#feature-size").hide();
</script>

但是我的 div 是响应式的，所以当我更改浏览器的大小时，固定高度不起作用。我想避免使用 Javascript。

【问题讨论】：

上传你的代码到 jsfiddle

标签： jquery html image background-image

【解决方案1】：

使用背景尺寸：封面；在您的 div 中，为您的文本框设置一个高度，并使用 overflow-y:scroll 或 auto 和 overflow-x:hidden;

【讨论】：

【解决方案2】：

您不能使用纯 CSS（无 javascript）让元素自动获得与其背景图像相同的尺寸。

但是，您可以使用伪背景图像，即使用常规图像代替实际背景图像。包含的 div 将扩展以容纳该图像。然后，将您的内容放在另一个 div 中，该 div 绝对位于同一包含 div 中。

伪代码（HTML）：

<div class="container">
   <img src="background.jpg" />
   <div class="content">Lorem ipsum</div>
</div>

伪代码（CSS）：

.container { position:relative; }
.container .content { position:absolute; top:0; left:0; }

【讨论】：