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

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>
    </>
);

现在的想法是，随着横幅尺寸的缩小，卡片的尺寸也会缩小。

现在，我的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;
}