I am working on meet conference and for that there are multiple tiles like we saw in google meet have contains avatar (middle in tile). As per the height and width changes in tile (#parent) also get change in avatar (#child) height and width. After getting minimum value of parent height and width we need to set this value to child height and width. For more clearance have some expected screenshorts.
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
should adjustable as resize.
Not 100% sure what you're asking. Will something like this work?
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>