如何相对于图像尺寸调整div的尺寸

Question

我想要的：

我有一个背景清晰的衬衫的PNG图像，我想将其放置在彩色正方形的顶部，这样图像中的衬衫将“弹出”正方形的边缘，以用于装饰目的。图像的宽度设置为100％，高度自动设置为保持原始比例。如果调整窗口大小，则正方形的高度和宽度应相对于图像的高度和宽度，并应在图像旁边响应性地调整大小。

我尝试过的事情：

] >>

什么是将div用于装饰正方形，将img html元素用于图像，并将它们都放置在容器中：

这是正方形的CSS：

.square {
    width: 80%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    background-color: red;
    z-index: -1;
}
图像的CSS：

.shirtImage {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
而且容器只是一个div。 

问题：

设置为正方形的高度的80％相对于整个页面，一直到底部，而不仅仅是将图片和正方形包裹起来的div。我意识到这种方法注定是行不通的，因为我期望正方形从父对象（包装div）推断出它的高度，从而从另一个孩子（图像）推断出它的高度，但是我无法完全理解为什么它无法正常工作，无法解决该问题。

[我想要的：我有透明背景的衬衫的PNG图像，我想将其放置在彩色正方形的顶部，这样图像中的衬衫将“弹出”在正方形的边缘上，...

Answer 1