Question

我有一个带背景图片的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足够高，以显示完整的背景图像。这是我尝试的第一个解决方案，基于我发现here的另一个stackoverflow答案：

    <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>

我把绝对定位放在聚光灯内容div上，因为否则图像将堆叠在聚光灯内容之下，而不是浮在其上的聚光灯内容。

然而，当我有足够的文字以使聚光灯内容的高度大于背景图像时，它会引起问题，因为绝对定位时盒子的大小不会随着聚光灯内容而扩展：

我也尝试用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。

Answer 1

使用background-size：cover;在div中，设置文本框的高度，并使用overflow-y：scroll或auto和overflow-x：hidden;

Answer 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; }

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

2 个答案: