如何通过CSS将单个值设置为其父高度/宽度的最小值的高度/宽度

Question

我正在做会议会议，为此我们在 google meet 中看到了多个磁贴，其中包含头像（磁贴中间）。根据平铺（#parent）的高度和宽度的变化，头像（#child）的高度和宽度也会发生变化。在获得父高度和宽度的最小值后，我们需要将此值设置为子高度和宽度。如需更多许可，请提供一些预期的屏幕短片。

case 1 : parent height=350 width=340 || min(350, 340)
         child height/width should be = 340
case 2 : parent height=340 width=100 || min(340, 100)
         child height/width should be = 100
case 3 : parent height=120 width=330 || min(120, 330)
         child height/width should be = 120

应该可以调整大小。

please check this expected outcome screenshort

Answer 1

不是 100% 确定您在问什么。这样的事情会奏效吗？

const child = document.querySelector("#child")
const parent = child.parentElement

child.style.height = `${parent.offsetHeight/2}px`
child.style.width = `${parent.offsetWidth/2}px`

#parent{
 height: 50vh;
 width: 50vw;
 background-color: beige;
 display: flex;
justify-content: center;
align-items: center;
}
#child{
display: flex;
justify-content: center;
align-items: center;
background-color: pink;
}

<div id="parent">
 <div id="child">Child</div>
</div>