javascript - 无法将行高自动调整为图像

Question

我正在使用 react-bootstrap 构建一个页面，并希望将图像作为我在网格中的行之一的背景。img 的高度是 1237.5px 并且它被放置在Col组件中。如果我将高度显式更改为 eg height: 25%，图像将占据组件高度的 25%，Row但Row组件仍然是 1237.5px 高。

我希望Row组件具有height: 30%桌面屏幕。它应该是响应式的，并且在移动设备上它应该占据整个屏幕的高度。

function App() {
  return (
    <div className="App">
      <UpperBar></UpperBar>
      <Container fluid>
        <Row >
          <Col xs={12} md={12} >
            <FirstBlock></FirstBlock>
          </Col>
        </Row>
        <Row>
          <Col xs={12} md={6}>1 of 2</Col>
          <Col xs={12} md={6}>2 of 2</Col>
        </Row>
        <Row>
          <Col xs={12} md={6}>1 of 2</Col>
          <Col xs={12} md={6}>2 of 2</Col>
        </Row>
      </Container>
      <Footer></Footer>
    </div >
  );
}

function FirstBlock() {
    return (
        <Image src={discolight} alt="first" style={{height: "25%", width: "100%"}}></Image>
    );
}

在此处输入图像描述

标签： javascriptreactjswebbootstrap-4react-bootstrap