时间戳

首页 > 解决方案 > 如果超出屏幕高度React Bootstrap，如何自动切断图像？

html - 如果超出屏幕高度React Bootstrap，如何自动切断图像？

问题描述

我正在尝试创建一个个人网站，您首先看到的是在屏幕最右侧 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>
        )
    }
}

任何信息/指导都会有所帮助。谢谢你。

标签： htmlcssreactjsbootstrap-4react-bootstrap

解决方案

所以我的解决方案，有点，只是放弃尝试使用 react-bootstrap 设置它的样式，并使用原始 css 来设置图像的样式，如下所示：

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

推荐阅读