Bootstrap carousel is resizing images!

I'm trying to put a carousel of images next to a static image. The problem is that when you transition from one image to another, it is resized. Follow the picture.

insert the description of the image here

insert the description of the image here

The image carousel I'm using is an example that has in Bootstrap's own documentation. Follow the Code: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background-color: black;">

        <div class="row" style="background-color: orange;">

            <div class="col-md-6 p-3 justify-content-center d-flex" style="">
                <img src="https://via.placeholder.com/300x300" class="img-fluid" alt="">
            </div>

            <div class="col-md-6 p-3 d-flex justify-content-center" style="background-color: royalblue;">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-keyboard="true">
                    <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img class="d-block w-100" src="https://via.placeholder.com/300x300"  alt="Primeiro Slide">
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="https://via.placeholder.com/300x300" alt="Segundo Slide">
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="https://via.placeholder.com/300x300" alt="Terceiro Slide">
                      </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only">Anterior</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Próximo</span>
                    </a>
                </div>
            </div>

        </div>

    </div>

The CSS code is imported from Bootstrap, so it has none code .css that I have made.

Thank you.

Author: Lucas Granvilla, 2019-07-29
Source

1 answers

Hello,

What was causing this problem was because you were using "display: flex;", which was not suitable for this situation.

In the comments you mentioned that you needed the image of the left block to be centralized, so to do this i removed the 'display: flex;' and added in its tag img the Bootstrap classes D-block (which assigns your image the property display: block ) and then gave a mx-auto (which causes the left and right margins to be calculated automatically, thus leaving your image centralized).

<div class="col-md-6 p-3">
     <img src="https://via.placeholder.com/300x300" class="img-fluid d-block mx-auto" alt="" />
</div>

And the end result was this: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background-color: black;">

        <div class="row" style="background-color: orange;">

            <div class="col-md-6 p-3">
                <img src="https://via.placeholder.com/300x300" class="img-fluid d-block mx-auto my-auto" alt="" />
            </div>

            <div class="col-md-6 p-3" style="background-color: royalblue;">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-keyboard="true">
                    <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img class="d-block w-100" src="https://via.placeholder.com/300x300"  alt="Primeiro Slide">
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="https://via.placeholder.com/300x300" alt="Segundo Slide">
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="https://via.placeholder.com/300x300" alt="Terceiro Slide">
                      </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only">Anterior</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Próximo</span>
                    </a>
                </div>
            </div>

        </div>

    </div>

Hope it helped;)

 0
Author: Mateus Daniel, 2020-02-04 13:29:12