Css 是否将div设置为子图像的宽度和高度？

我有一个容器类的div。此div的高度必须等于宽度。我通过以下方式实现了这一目标：

.container{
    background-color: #e6e6e6;
    position: relative;
}

.container:before{
    content: "";
    display: block;
    padding-top: 100%;
}

容器内有一个图像支架，该支架内有一个图像。图像必须受到约束，其高度或宽度不得超过容器，并且仍保持纵横比。这是通过以下方式实现的：

img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;

}

我的问题是关于图像支架，我需要它的宽度和高度与里面的图像相同。我该怎么做？请只使用CSS

从img标签中删除位置：绝对

.container{
    background-color: #e6e6e6;
    position: relative;
}

.container:before{
    content: "";
    display: block;
    padding-top: 100%;
}

.img-holder {
    border-style: solid;
    border-color: #0000ff;
}

img{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
}

---

？@Mr.Alien集装箱舱的高度不再等于width@panthro你解决了这个问题吗？图像现在是容器的一半，容器的高度现在与宽度不一样。容器中的定位可以通过移除填充顶部：100%来固定。容器：beforeYes，但是-容器的高度现在与容器的高度不一样这个怎么样？您可以创建另一个div来环绕容器，并为其指定固定的宽度和高度，以及display:inline block这是一个困难的问题。。。我可能会在某个时候回到这一点：