Image positioned over container div limit - css

Question

For better understanding I'm updating the entire question.
I'm using bootstrap 3 and the carousel component, however, one of the pages of the carousel contains an image that needs to be positioned in the bottom of the section tag without resizing the container.
Here is the code I'm using:
<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>
Here is a running page with the problem: www.remotepark.com.br
You may see that after transitioning to the second page on carousel component, it is resized.
How can I fix this keeping the height of the pages equal (actually all pages need to have the same height as page 2)?

Answer 1

Not sure if I completely understood..
but maybe give this a try and see if it accomplishes what you're aiming for.
<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>

Answer 2

Try changing your style.css from
.carousel .item {
padding-top: 50px;
height: 300px;
}
to:
.carousel .item {
height: 290px; /* the image height */
}
also remove:
style="margin-top: -40px" from the image in the first carousel item