gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:33:12 25 4
gpt4 key购买 nike

我有一些非常简单的东西。

我有一个 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%;
}

发生的事情是当我缩小页面时我的卡片高度大于我的横幅高度 --> 看图片

enter image description here

最佳答案

如果我正确理解您的问题,那么您应该能够通过对 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;
}

关于css - React - 当父组件收缩时使子组件收缩,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53908261/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com