Currently, I am working on developing my personal website with a vision of featuring a captivating picture slideshow using a Carousel tool. My goal is to place this slideshow in the rightmost 10 columns of the screen where the images will occupy the full width but only the height of the screen itself. To maintain the aspect ratio of the images, I intend to cut off any parts that exceed the screen's height. Although I have made progress, the issue lies in correctly controlling the image height to avoid it extending beyond the screen.
I've experimented with adjusting the max height and view height properties for the images, rows, and columns in various ways, yet I can't seem to achieve the desired result.
Below is the code snippet for the carousel:
import React, { Component } from 'react'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Carousel from 'react-bootstrap/Carousel'
import Image from 'react-bootstrap/Image'
import img1 from '../assets/Home/img1.jpg'
import img2 from '../assets/Home/img2.jpg'
import img3 from '../assets/Home/img3.jpg'
export default class Home extends Component {
render() {
return (
<Container fluid>
<div className="vh-100">
<Row className="row">
<Col className="col-2"></Col>
<Col className="col-10 px-0 align-items-start">
<Carousel>
<Carousel.Item>
<Image className="mh-100" src={img1} fluid />
<Carousel.Caption>
<h3>First slide label</h3>
<p>Description of image.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image className="mh-100" src={img2} fluid />
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Description of image.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image className="mh-100" src={img3} fluid />
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Description of image.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</Col>
</Row></div>
</Container>
)
}
}
If you have any insights or guidance on fixing this issue, it would be greatly appreciated. Thank you!