Html 保持两幅图像并排，反应灵敏，边对边？

我有两张照片要并排保存。我做到了这一点，但我希望他们能够做到边对边，反应灵敏，最重要的是保持纵横比。现在，当您调整浏览器的大小时，图像会受到挤压

JSFIDDLE：

HTML

---

您可以在这里查看我的路线：

主要思想是使用背景图像+背景大小：覆盖图像而不是img标签

<div id="kitchenleft" class="halfCompositionLeft" style="background-image: url()"> </div>


.halfCompositionLeft {
    position: absolute; 
    top: 0px; 
    left: 0px;
    width: 50%;
    height: 100%;
    z-index:1;
    border:#fff thin solid; 
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
}

.半合成左{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：50%；
身高：100%；
z指数：1；
边框：#fff薄实线；
背景重复：无重复；
-webkit背景尺寸：封面；
背景尺寸：封面；
背景位置：50%50%；
}

 .scrollablecontainer {
 /* */ position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;

 }

.halfCompositionLeft {
 position: absolute; 
top: 0px; 
left: 0px;
width: 50%;
height: 100%;
z-index:1;
border:#fff thin solid;  
 }
.halfCompositionRight {
position: absolute;
top: 0px; 
left: 50%; 
width:50%; 
height: 100%; 

<div id="kitchenleft" class="halfCompositionLeft" style="background-image: url()"> </div>


.halfCompositionLeft {
    position: absolute; 
    top: 0px; 
    left: 0px;
    width: 50%;
    height: 100%;
    z-index:1;
    border:#fff thin solid; 
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
}