html - 保持两个图像并排、灵敏且边对边？

Question

我有两张图片我想并排放置。我做到了这一点，但我希望他们能够从边到边，响应迅速，最重要的是保持纵横比。现在，当您调整浏览器大小时，图像会被压缩。

JSFIDDLE:http://jsfiddle.net/omarel/oupq6fak/

HTML

    <div id="scrollablecontainer">



        <img id="kitchenleft" class="halfCompositionLeft" src="https://dl-web.dropbox.com/get/kitchen_left.jpg?_subject_uid=9047713&w=AADbzU1vkkAZzcgEEb_1f3S_vcfx4fvVseYoAaQN5_3vJw">
        <div style="z-index:2;position:absolute;right:0px;width:59%;">blah left</div>

        <img id="kitchenright" class="halfCompositionRight" src="https://dl-web.dropbox.com/get/pool_right.jpg?_subject_uid=9047713&w=AABZnKZrODSr9rGU5kOX7q2EHycNMAqq-mvlUxn0T5tVAg">
        <div style="z-index:2;position:absolute;right:0px;width:48%;">blah right</div>

    </div>


</div>

CSS

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

Answer 1

你可以在这里查看我的方法:http://jsfiddle.net/oupq6fak/4/

主要思路是用background-image + background-size: cover代替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%;
}