CSS3高度自动问题 - 寻找使图像响应的替代方案

Question

不要开枪打我，我对编码有合理的意义，所以我得到了一些帮助......

在我的主体容器中，我有一个侧栏和一个带有6个包装器的物品容器，其中包含3个2x格式的6个过渡图像。全屏看起来很棒但是当调整大小时，包装器保持其高度而不是缩放。尝试了一个高度自动，但它只是将包装器一个叠在另一个上面，高度百分比也不会缩放。

（感谢任何帮助。感谢。我发布了图片，但直到我得到代表才能发布）

这里是CSS：

article {
width:70%;
float:left;
margin:auto;

}

.img_wrapper {

float:left;
position:relative;
height:auto;
width:30%;
margin:0 1%;

}

.img_wrapper img {
    border:solid 2px #dbc3e8;   
position:absolute;
width:100%;
height:auto;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.img_wrapper img.top:hover {
opacity:0;
}

以下是HTML：

    <article>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>

        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>
        <div class="img_wrapper">
            <a href="#"><img class="bottom" src="img/index/103a.jpg" alt="" /></a>
            <a href="#"><img class="top" src="img/index/101a.jpg" alt="" /></a>
        </div>

提前致谢