CODEWITHSUNDEEP
htmlcssbootstrap-4
mohammed nabil
mohammed nabil

Reputation: 105

How to reduce the image height in carousel slider

How to reduce the image height in carousel slide in bootstrap, but it must be responsive after reducing the image height.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/xactprofile1.png" class="d-block w-100 d-inline-block" alt="..." />
        </div>
    </div>
</div>

Upvotes: 0

Views: 1462

Answers (2)

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

Will changing the .carousel-inner height solve your problem? or it's not what you are looking for? because you could use for example height: 50vh and it will change the images too but the whole inner is effected with it. and images are going to stay responsive.

check out this snippet:

CSS:

.carousel-inner {
  height: 50vh;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<div class="slider">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <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>
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
        <div class="overlay "> </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
        <div class="overlay "> </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
        <div class="overlay "> </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
        <div class="overlay "> </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
        <div class="overlay "> </div>
      </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">Previous</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">Next</span>
    </a>
  </div>
</div>

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Upvotes: 0

Aahad
Aahad

Reputation: 577

Try this. It changes height when you try to reduce the height based on this. Add it to your image.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>

</body>
</html>

Upvotes: 1

Related Questions