Topic: Set Maximum Height for Carousel

junior5417 pro asked 6 years ago


Hi, How do i set min/max height for mdb-carousel and the images should fit into the desired height x width

Damian Gemza staff answered 5 years ago


Dear @carlosalviz

I have used an image with 2592x1728 size, and with the below .scss code, my carousel looks fine:

.html:

<div class="container my-5">
  <mdb-carousel class="carousel slide carousel-fade" [type]="'carousel-thumbnails'" [animation]="'fade'">
    <mdb-carousel-item>
      <img class="d-block w-100" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley%2C_California.jpg" alt="First slide">
    </mdb-carousel-item>
    <mdb-carousel-item>
      <img class="d-block w-100" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley%2C_California.jpg" alt="Second slide">
    </mdb-carousel-item>
    <mdb-carousel-item>
      <img class="d-block w-100" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley%2C_California.jpg" alt="Third slide">
    </mdb-carousel-item>
  </mdb-carousel>
</div>

.scss:

.carousel-inner {
  max-height: 400px;
  img {
    max-height: 400px;
  }
}

.carousel-indicators img {
  max-width: 100px;
}

Please take a look at this screenshot.

Best Regards,

Damian


carlosalviz free commented 5 years ago

Tks. It only worked including a max-height in the css

.carousel-indicators img { max-height: 67px; max-width: 100px; }


carlosalviz free answered 5 years ago


I-m already using the last version (7.5.1).

It-s just a component with that code. Maybe you have to use bigger images to reproduce it.
(that-s why we had to use the css you mentioned in this post. Dont forget to include it)

My size says 3456 x 4608. Please confirm


Damian Gemza staff answered 5 years ago


Dear @carlosalviz

How can I reproduce your problem? I have tried to reproduce it with code from our docs, but without success - for me, there's no such problem.

Could you please provide me with reproduction steps with which I'll be able to track your problem? Also please specify, which version of MDB Angular you're using.

Maybe you should try to update to the latest one (7.5.1)?

Best Regards,

Damian


carlosalviz free answered 5 years ago


Here-s my issue related to this case

Code is the same u have in the page:

 <mdb-carousel class="carousel slide carousel-fade" [type]="'carousel-thumbnails'" [animation]="'fade'">
        <mdb-carousel-item>
          <img class="d-block w-100" src="/assets/prods/IMG_20180610_115144.jpg" alt="First slide">
        </mdb-carousel-item>
        <mdb-carousel-item>
          <img class="d-block w-100" src="/assets/prods/pruebacollar.jpg" alt="Second slide">
        </mdb-carousel-item>
        <mdb-carousel-item>
          <img class="d-block w-100" src="/assets/prods/IMG_20180610_115942.jpg" alt="Third slide">
        </mdb-carousel-item>
      </mdb-carousel>

And I included the css style you mentioned. That-s all.

images are overlapping



    .carousel-inner img {

        max-height: 350px;
    }

Arkadiusz Idzikowski staff answered 6 years ago


Please try to use the below code in your styles.scss stylesheet:
.carousel-inner {

max-height: 400px;

img {

max-height: 400px;

}

}
Regards, Arek

carlosalviz free commented 5 years ago

Hi Arkadiusz, I also wanted to change the size of the img inside a mdb-carousel; but then, using your suggestion it changes the Big Image, but the little ones got crazy. They are now showing over the big one. (a part of the little image is now over the big one)

Is there a way to fix that? (I-m using Thumbnails carousel)

tks,


Arkadiusz Idzikowski staff commented 5 years ago

Hello,

Could you provide some screenshots and example code on which I will be able to debug this problem?


carlosalviz free commented 5 years ago

Sure, I've just added that in the comments below.

Tks



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Mac
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No