CSS-only square div fitting inside rectangle div

Question

I have determined how to set a div height based on its width (using percentage width and padding-bottom). But I also need to be able to set a div width based on its height.

Answer 1

This is easiest done when .rectangle literally takes the full window - in other words, its width and height are 100vw and 100vh respectively.

If that is the case, then your square is simply:

.square {
    width: 100vh;
    height: 100vh;
    margin: 0 auto;
}
@media all and (orientation: portrait) {
    .square {
        width: 100vw;
        height: 100vw;
    }
}

It may be a little trickier to vertically-center the square in the portrait view, but certainly not impossible. margin-top: calc(50vh - 50vw) would do it, for instance.