将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标签中删除位置：绝对值。

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