如何使用CSS将div调整为其容器中最大的可能方块？如果CSS无法实现,那么如何使用JavaScript呢？
如果容器有height > width我希望广场的大小width x width.如果容器有width > height我想要的大小正方形height x height.
当容器的尺寸改变时,儿童的尺寸应相应地调整.
我发现这个答案有助于维持孩子的长宽比.当容器的宽度大于子容器溢出父级时的高度时,此方法不起作用,如下面的代码片段所示.
.flex {
display: flex;
}
.wide,
.tall {
flex: none;
border: 3px solid red;
}
.wide {
width: 150px;
height: 100px;
}
.tall {
width: 100px;
height: 150px;
}
div.stretchy-wrapper {
width: 100%;
padding-bottom: 100%;
position: relative;
background: blue;
}
div.stretchy-wrapper>div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
font-size: 24px;
text-align: center; …