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 for images而不是img tag

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

保持两个图像并排，响应和边缘到边缘？

1 个答案: