Estoy trabajando en una conferencia de reuniones y para eso hay varios mosaicos como vimos en Google Meet que contienen avatar (en el medio del mosaico). Según los cambios de alto y ancho en el mosaico (#parent), también se obtienen cambios en el alto y el ancho del avatar (#child). Después de obtener el valor mínimo de la altura y el ancho de los padres, debemos establecer este valor en la altura y el ancho de los hijos. Para obtener más espacio libre, tenga algunos cortos de pantalla esperados.
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 = 120debe ser ajustable como cambiar el tamaño.
por favor revise este corto de pantalla de resultado esperado
No estoy 100% seguro de lo que estás preguntando. ¿Funcionará algo como esto?
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>