如何让子级沿着父级div调整大小，同时保持比例？

Question

如何使子元素沿着父元素流畅地调整大小，同时保持比例？

正如您在附加的视频文件中看到的那样，

aspect-ratio: 1/0

可以工作，但是当您将鼠标悬停在 HTML 元素上时，它会变得比其他元素小。我希望我的 Hero 组件保留在 HTML 元素中并具有相同的效果。我该如何解决这个问题？

视频：（你看到的轮播图突然变化是我把

width: 1250px

改成

max-width: 1250px

的时候） https://drive.google.com/file/d/14l7UzzRDMfd9AVykaF5gvza68HLycfSH/view?usp=sharing

Hero.js（主要）

<div className="Hero" id="Hero">
    <Accordion />
    <div className="border"></div>
    <Carousel />
</div>

英雄.css

.Hero {
    width: 1250px;
    padding-left: 2rem;
    padding-right: 3rem;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    
}

.Hero .border {
    width: 1px;
    background-color: #b3b3b3;
    margin-left: 1rem;
    margin-right: 2rem;
}

/* Responsiveness */
@media only screen and (max-width: 1250px) {
    .Hero {
        aspect-ratio: 1/0;
    }
}

我尝试将

width: 1250px

更改为

max-width: 1250px

并且 Hero 组件保留在 HTML 元素内。然而，将其调整得更小会导致轮播调整大小，而不是整个英雄组件的大小。

Answer 1

您可以使用 flex-grow 和 flex-shrink 属性的组合来控制 Flex 容器内子元素的行为。

你可以尝试：

.Hero {
    max-width: 1250px;
    padding-left: 2rem;
    padding-right: 3rem;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.Hero > * {
    flex: 1 1 auto; /* Equal flex grow, shrink, and basis */
    max-width: 100%; /* Occupy maximum width within the container */
    aspect-ratio: 1/1; /* Maintain aspect ratio for child elements */
}

.Hero .border {
    width: 1px;
    background-color: #b3b3b3;
    margin-left: 1rem;
    margin-right: 2rem;
}