how to make gallery show same height picture in react-bootstrap


Hi guys so I’m trying to create gallery using react-bootstrap carousel. I manage to show all the picture but I don’t know why, all the image show different height even though they have same height (780px) does the width affects it ? because these images have different width. How can I resolve this ?

Here’s my code:

            <Container fluid>
                <Row className="Homegallery fontReg">
                    <Col lg={4} className="galleryleft">
                        <h1 className="fontSB">Gallery</h1>
                        <hr style={{width:'41%', margin:'15px 0px', border:'2px solid #967A50', opacity:'100'}}></hr>

                        <p> See our latest collection of pictures to make you feel mesmerize with our
                            hotel that provide comfort, quality and trendy feeling for your stay. 
                            We make sure that you feel completely at home.
                        </p>
                    </Col>

                    <Col className="galleryright" lg="8">
                        <Carousel fade>
                            <Carousel.Item interval={1000}>
                                <img
                                    className="d-block w-100"
                                    src="./Images/galeri1.jpg"
                                    alt="First slide"
                                />
                            </Carousel.Item>

                            <Carousel.Item interval={1000}>
                                <img
                                    className="d-block w-100"
                                    src="./Images/galeri2.jpg"
                                    alt="Second slide"
                                />
                            </Carousel.Item>

                            <Carousel.Item interval={1000}>
                                <img
                                    className="d-block w-100"
                                    src="./Images/galeri3.jpg"
                                    alt="Third slide"
                                />
                            </Carousel.Item>
                        </Carousel>
                    </Col>
                </Row>
            </Container>

Source: CSS – Stack Overflow

November 29, 2021
Category : News
Tags: css | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.