How to make the image to be responsive in the mobile inside the Carsel bootstrap 4, so it fits

Navigation
1

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="first-slide" src="images/website.jpg" alt="First slide">
            <div class="container">
              <div class="carousel-caption text-left">
                <h1>OPEN S.</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a class="btn btn-lg btn btn-danger" href="#" role="button">Saiba Mais !</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="second-slide" src="images/business.jpg" style="height: 510px;" alt="Second slide">
            <div class="container">
              <div class="carousel-caption">
                <h1>Open S.</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a class="btn btn-lg btn btn-danger" href="#" role="button">Saiba Mais !</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="img-fluid"  src="images/mine.png" width="1000" height="249" alt="Third slide">
            <div class="container">
              <div class="carousel-caption text-right">
                <h1>Open S</h1>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a class="btn btn-lg btn btn-danger" href="#" role="button">Saiba Mais !</a></p>
              </div>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    
asked by anonymous 08.02.2018 / 04:17

1 answer

0

Removing errors

Remove the widths and heights you've already placed in the images.

Creating fluid images

You should use the .img-fluid class in each element img , so that all images extend as much as possible in the carrot container >.

This happens because this class has properties so that the maximum width of the images is 100% that of the parent elements.

What's more, it will not matter whether you slow down the screen or not. Your image will always be resized following the width of the parent.

Bonus

The previous steps create responsive images, however, they can end up making the interface look ugly and increase site traffic.

Because of this, I recommend that you learn to use the srcset attribute to put different image sizes for different viewports . So you're going to improve the experience and user interface as well as site traffic.

Links to study about srcset:

09.02.2018 / 04:00
How to suppress the compilation message of asm.js? Radio buttom that when selected changes the background of a div and saves in DB the result