将部分拉伸到背景图像的高度

Question

我正在使用 bootstrap，尽管示例没有考虑它。

我需要的是 section 拉伸到背景图片的高度。

我构建了一个最小示例，但它似乎无法加载背景图片：

Answer 1

所以这与您采用的方法不同，我遵循了这个示例 CSS: How to set container size equal to background image size。但它不使用 background-image 属性。我不确定这对你来说是否有必要。

HTML

<div class="wrap">
    <img src="https://escolaeducacao.com.br/wp-content/uploads/2015/07/dna.jpg" />

    <section class="content">
    to be expanded to the size of the background image.
    </section>

</div>

CSS

.wrap {
    display: inline-block;
    position: relative;
}

.wrap img + .content {
    position: absolute;
    top: 0;
    left: 0;
}

将换行设置为 position: relative 将导致设置为 position: absolute 的子元素相对于父元素

定位自身

将部分拉伸到背景图像的高度

Stretch section to height of background image

css

background-image