Невозможно автоматически изменить высоту строки для изображения - PullRequest
Новая
       40

Невозможно автоматически изменить высоту строки для изображения

1 голос
/ 09 июля 2020

Я создаю страницу с помощью response- bootstrap и хочу разместить изображение в качестве фона для одной из строк, которые у меня есть в моей сетке. Высота img составляет 1237,5 пикселей, и он помещается в компонент Col. Если я изменю высоту явно, например, на height: 25%, изображение займет 25% от высоты компонента Row, но компонент Row по-прежнему будет иметь высоту 1237,5 пикселей.

Я бы хотел 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>
    );
}

введите здесь описание изображения

...