css - 将div设置为子图像的宽度和高度？

Question

JSFiddle

我有一个带有容器类的 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。

Answer 1

https://jsfiddle.net/1tbrtoaj/4/

从您的 img 标签中删除 position: absolute。

.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;
}