React - 当父组件缩小时使子组件缩小答案

【问题标题】：React - Make Child component shrink when parent component shrinksReact - 当父组件缩小时使子组件缩小
【发布时间】：2019-05-23 07:28:59
【问题描述】：

我有一些非常简单的事情。

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

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

还有一个卡片组件

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

当我缩小页面时，我的卡片高度大于横幅高度 --> 见图片

【问题讨论】：

不，这不是关于高度，而是关于横幅内的背景图像...... -280px 是罪魁祸首

标签： css reactjs sass

【解决方案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;
}

【讨论】：