css - 图像位于容器 div 限制之上

Question

为了更好地理解我正在更新整个问题。

我正在使用 bootstrap 3 和 carousel 组件，但是，carousel 的一个页面包含一个图像，需要在不调整容器大小的情况下将其放置在 section 标记的底部。

这是我使用的代码:

<section id="header-slider" class="section carousel slide" data-ride="carousel" style="padding-bottom: 0;">
                <!-- Start Slider Navigation -->
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#header-slider"></li>
                    <li data-slide-to="1" data-target="#header-slider" class=""></li>
                </ol>
                <!-- End Slider Navigation -->
                <div class="carousel-inner">
                    <div class="item row active">
                        <div class="col-xs-5 hidden-sm">
                            <img src="..." style="margin-top: -40px">
                        </div>
                        <div class="col-xs-7">
                            <h1>...</h1>
                            <p>...</p>
                        </div>
                    </div>
                    <div class="item row">
                        <div class="col-xs-8">
                            <h1>...</h1>
                            <p>...</p>
                        </div>
                    </div>

                </div>
            </section>

这是一个有问题的运行页面:www.remotepark.com.br

您可能会看到在轮播组件上转换到第二页后，它的大小发生了调整。

如何解决这个问题，使页面的高度保持相等(实际上所有页面的高度都需要与第 2 页相同)？

Answer 1

不确定我是否完全理解.. 但或许可以尝试一下，看看它是否能实现您的目标。

<div style="width: 400px; height: 250px; position: relative;">
  <div style="width: 400px; height: 150px">
    <img src="..." style="width: 200px; height: 200px; position: absolute; bottom: 0;" />
  </div>
</div>