If you are encountering issues with image height in Chrome while using bootstrap 4 Alpha, here's a helpful solution: According to the bootstrap 4 documentation:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>
  </div>
</div>

Solution:

To resolve this issue, wrap the image inside a "div" with the class ".container", like so:

<div class="carousel-item active">
  <div class="container">
    <img src="images/proyecto_0.png" alt="First slide" class="d-block img-fluid">
  </div>
</div>

If you're using Bootstrap 3, I suggest implementing the following:

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  min-height: 500px;    /* Adjust slide height as needed */
}

Although this post is a bit older, Bootstrap is still going strong!

In contrast to @Eduardo's advice, I found it necessary to make the following modification:

#myCarousel.carousel.slide {
    width: 100%; 
    max-width: 400px; !important
}

Simply adjusting .carousel-inner {} didn't quite do the trick for me - the images stayed fixed in size, but the navigation controls were wonky and appearing off to the side of the div.

I encountered a similar issue.

When my slide was moving to the left in a responsive website, my height reverted back to its original height.

To resolve this, I utilized CSS exclusively:

.carousel .item.left img{
    width: 100% !important;
}

To adjust the height of an image, simply add "height='400px'" to the image attribute:

<img class="d-block w-100" src="../assets/img/natural-backdrop.jpg" height="400px" alt="First slide">

A unique responsive sample has been crafted that functions admirably for myself, and I consider it to be quite straightforward. Take a look at my carousel-fill code:

.carousel-fill {
    height: -o-calc(100vh - 165px) !important;
    height: -webkit-calc(100vh - 165px) !important;
    height: -moz-calc(100vh - 165px) !important;
    height: calc(100vh - 165px) !important;
    width: auto !important;
    overflow: hidden;
    display: inline-block;
    text-align: center;
}

.carousel-item {
    text-align: center !important;
}

The navigation height plus footer are slightly less than 165px, so that value suits me perfectly. Adjust the value accordingly to fit your needs. I have overridden the .carousel-item from bootstrap to ensure my videos are centered.

My carousel appears as follows, observe the presence of "carousel-fill" on the video tag.

<div>
        <div id="myCarousel" class="carousel slide carousel-fade text-center" data-ride="carousel">
            <!-- Indicators -->
            <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>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <video autoplay muted class="carousel-fill">
                        <source src="~/Video/CATSTrade.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                    <div class="carousel-caption">
                        <h2>CATS IV Trade engine</h2>
                        <p>Automated trading for high ROI</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <video muted loop class="carousel-fill">
                        <source src="~/Video/itrs.mp4" type="video/mp4">
                    </video>
                    <div class="carousel-caption">
                        <h2>Machine learning</h2>
                        <p>Machine learning specialist</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <video muted loop class="carousel-fill">
                        <source src="~/Video/frequency.mp4" type="video/mp4">
                    </video>
                    <div class="carousel-caption">
                        <h3>Low latency development</h3>
                        <p>Create ultra fast systems with our consultants</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="~/Images/data pipeline faded.png" class="carousel-fill" />

                    <div class="carousel-caption">
                        <h3>Big Data</h3>
                        <p>Maintain, generate, and host big data</p>
                    </div>
                </div>
            </div>

            <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#myCarousel" 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" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

If someone requires control over the videos like I do, I manage the videos like this:

<script language="JavaScript" type="text/javascript">
        $(document).ready(function () {
            $('.carousel').carousel({ interval: 8000 })
            $('#myCarousel').on('slide.bs.carousel', function (args) {
                var videoList = document.getElementsByTagName("video");
                switch (args.from) {
                    case 0:
                        videoList[0].pause();
                        break;
                    case 1:
                        videoList[1].pause();
                        break;
                    case 2:
                        videoList[2].pause();
                        break;
                }
                switch (args.to) {
                    case 0:
                        videoList[0].play();

                        break;
                    case 1:
                        videoList[1].play();
                        break;
                    case 2:
                        videoList[2].play();
                        break;
                }
            })

        });
</script>

If you're looking to adjust only the height that an element occupies with an image, consider using this code snippet:

.carousel-item {
    height: 600px !important;
}

Keep in mind though, this approach doesn't make the image size responsive; it will just crop the image to fit the specified height.