React-responsive-carousel: Set max-Height of Slides

[LeopoldLerch]

Hy, I want to use the carousel inside some divs with heights in percentage. However, when I include the carousel, it always sizes to the width and height of the content (altough it obviously respects the available width)

Is there a way to define the height of the carousel relative to the location it is included, so that the slides don´t break the layout?

(btw, i don´t want to use fixed pixels)

[leandrowd]

Hey @LeopoldLerch, could you publish an example of the problem?

[occult]

@leandrowd I think the question is to limit the height for images. For example, in my project a user uploaded an image that is 720x960 pixels. On mobile the image is resized and it looks perfect in the carousel, but on desktop the image is too tall. The ideal hight would be something like 50% of the current height. I tried max height, but it doesn't really work. The carousel goes into the background. I wanted something to limit the height of the carousel. Thank you for your time and hard work! Sorry if this is a noob question haha

[lmaddio]

@occult wrap the img tag in a div, set the div a fixed height and to the img tag set width in auto and height in 100%, that will cause your images be as tall as their div parent.

[atkallie]

If you're not against the idea of overriding the default CSS styling, then you could create a CSS file with the following:

.carousel .thumb img {
    width: 100% !important;
    height: 100% !important;
}

.carousel .slide img {
    max-height: 300px;  /* change this to whatever you want */
    width: auto;
}

...and then in your code (assuming ES6 syntax) you would simply override the defaults by importing the CSS file you created. For example:

import React, { Component } from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import './style/overrides.css';  // change this to the file path of your overrides

[leandrowd]

Cleaning up old issues. Feel free to reopen if needed...