Реагируйте - Уменьшите дочерний компонент при уменьшении родительского компонента.

Question

У меня есть кое-что очень простое.

У меня есть компонент Banner, который выглядит следующим образом

const banner = (props: IBannerProps) => {
  // ...
  return (
    <div className={classes.Banner}>
      {props.children}
    </div>
  );
};

И компонент Card

const card = (props: ICardProps) => {
    return <div className={classes.Card}>{props.children}</div>;
};

Я хочу использоватьони выглядят следующим образом

const home = () => (
    <>
        <Banner backgroundImage="home">
            <Card> Quack </Card>
        </Banner>
    </>
);

Теперь идея состоит в том, что я хочу уменьшить размер карты при уменьшении размера баннера.

Прямо сейчас мой css баннера выглядит следующим образом

.Banner {
    background-image: // some image
    height: 60vh;
    width: 100vw;
    background-position: center -280px;
    background-repeat: no-repeat;
    background-size: cover;
}

И моя карта

.card {
    border: 2px solid green;
    height: 80%;
    width: 80%;
}

Происходит то, что высота моей карты больше, чем высота моего баннера, когда я уменьшаю страницу -> см. Рис.

Answer 1

Если я правильно понимаю ваш вопрос, то вы сможете решить свою проблему, внеся следующие изменения в свой CSS:

.Banner {
    background-image: // some image
    height: 60vh;
    width: 100vw;
    background-position: center; // remove -280px
    background-repeat: no-repeat;
    background-size: cover;

    // Add this to allow absolute position of child card
    position:relative;
}

.card {
    border: 2px solid green;
    height: 80%;
    width: 80%;
}

// When a card exists in banner, position it with absolute
// and force the boundary of the card to match the boundary
// of the banner
.Banner .card { 
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}