React - 当父组件收缩时使子组件收缩

Question

我有一些很简单的事情。

我有一个如下所示的横幅组件

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