我想做的图像响应任何图像大小是一个大小

Question

我想做这个图像响应任何图像大小是这样的一个大小img：

＆＃13;

＆＃13;

.div1{
    display: inline-block;
    overflow: hidden;
    float: right;
    position: relative;
    margin-top: 15px;
    height: 100%;
}
.div2{
    display: inline-block;
    overflow: hidden;
    float: left;
    position: relative;
    margin-top: 15px;
    height: 100%;
}
.div1 img{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 100%;
    background-size: contain;
    max-height:100vh;
}
.div2 img{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 100%;
    background-size: cover;
    max-height:100vh;
}

＆＃13;

<div class="col-lg-12 col-md-12 col-sm-12" id="myDiv">
                <div class="col-md-6 col-lg-6 div1">

                    <img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" class="img-responsive img-thumbnail">
                    <div class="contactonimg">
                        <h3>الموضوع الأول</h3>
                        <p>الموضوع الأول يحتوي على وصف للموضوع، الموضوع الأول يحتوي على وصف للموضوع...</p>
                    </div>
                </div>
                <div class="col-md-3 col-lg-3 div2">
                    <img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" class="img-responsive img-thumbnail">
                    <div class="contactonimg">
                        <h3>الموضوع الأول</h3>
                    </div>
                </div>
                <div class="col-md-3 col-lg-3 div2">
                    <img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" class="img-responsive img-thumbnail">
                    <div class="contactonimg">
                        <h3>الموضوع الأول</h3>
                    </div>
                </div>
                <div class="col-md-3 col-lg-3 div2">
                    <img src="https://tse4.mm.bing.net/th?id=ORT.TH_470633631&pid=1.12&eid=G.470633631" class="img-responsive img-thumbnail">
                    <div class="contactonimg">
                        <h3>الموضوع الأول</h3>
                    </div>
                </div>
                <div class="col-md-3 col-lg-3 div2">
                    <img src="https://www.w3schools.com/css/trolltunga.jpg" class="img-responsive img-thumbnail">
                    <div class="contactonimg">
                        <h3>الموضوع الأول</h3>
                    </div>
                </div>

            </div>

＆＃13;

＆＃13;

＆＃13;

i need like this html代码是：

<div class="col-md-6 col-lg-6 div1">

    <img src="img/1.jpg" class="img-responsive img-thumbnail">
    <div class="contactonimg">
        <h3>الموضوع الأول</h3>
        <p>الموضوع الأول يحتوي على وصف للموضوع، الموضوع الأول يحتوي على وصف للموضوع...</p>
    </div>
</div>
<div class="col-md-3 col-lg-3 div2">
    <img src="img/2.jpg" class="img-responsive img-thumbnail">
    <div class="contactonimg">
        <h3>الموضوع الأول</h3>
    </div>
</div>
<div class="col-md-3 col-lg-3 div2">
    <img src="img/3.jpg" class="img-responsive img-thumbnail">
    <div class="contactonimg">
        <h3>الموضوع الأول</h3>
    </div>
</div>
<div class="col-md-3 col-lg-3 div2">
    <img src="img/4.jpg" class="img-responsive img-thumbnail">
    <div class="contactonimg">
        <h3>الموضوع الأول</h3>
    </div>
</div>
<div class="col-md-3 col-lg-3 div2">
    <img src="img/1.jpg" class="img-responsive img-thumbnail">
    <div class="contactonimg">
        <h3>الموضوع الأول</h3>
    </div>
</div>

和css是：

.div1{
    display: inline-block;
    overflow: hidden;
    float: right;
    position: relative;
    margin-top: 15px;
    height: 100%;
}
.div2{
    display: inline-block;
    overflow: hidden;
    float: left;
    position: relative;
    margin-top: 15px;
    height: 100%;
}
.div1 img{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 100%;
    background-size: contain;
    max-height:100vh;
}
.div2 img{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 100%;
    background-size: cover;
    max-height:100vh;
}

但是当我改变图像时，高度不像我上传的第一张图片 error image