Как автоматически обрезать изображение, если оно превышает высоту экрана React Bootstrap? - PullRequest
Новая
       36

Как автоматически обрезать изображение, если оно превышает высоту экрана React Bootstrap?

0 голосов
/ 27 мая 2020

Я пытаюсь создать личный веб-сайт, на котором первое, что вы видите, - это слайд-шоу с изображениями с использованием карусели в 10 крайних правых столбцах экрана. Я хочу, чтобы изображения занимали всю ширину крайних правых 10 столбцов, однако занимали только высоту экрана; он должен поддерживать соотношение сторон, просто обрезая изображение, когда оно превышает высоту экрана. То, что у меня есть до сих пор, делает именно то, что я хочу, КРОМЕ обрезки высоты изображения, если оно выходит за пределы экрана.

Я пробовал играть с максимальной высотой и высотой просмотра изображений, строк и столбцов различными способами / комбинациями, но, похоже, это не помогает.

Вот код для карусели: 

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>
        )
    }
}

Любая информация / руководство были бы полезны. Спасибо.

1 Ответ

0 голосов
/ 28 мая 2020

Итак, мое решение вроде как просто отказалось от попытки стилизовать его с помощью response- bootstrap и использовало raw css для стилизации изображения следующим образом: 

img.slide {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 100vh;
}
...