Наложение изображений и отзывчивый дизайн

Question

Я должен наложить два изображения, чтобы получить эффект затухания на прокрутке страницы, и это не проблема, это хорошо работает. Проблема в том, что если я не устанавливаю высоту класса .square-banner, баннеры перекрываются следующими (второе изображение). Поскольку сайт реагирует, мне нужно устранить высоту класса .square-banner, и я не нашел для этого решения.

<div id="banner-1-1" class="square-banner"> 
    <img class="img-bottom" id="img-bottom-1" src="images/prodigio-wording.jpg"> 
    <img class="img-top" id="img-top-1" src="images/prodigio.jpg"> 
</div> 

.square-banner { 
    position:relative; 
    float:left; 
    width:100%; 
    height: 430px; 
    cursor: pointer; 
} 

.img-bottom, .img-top { 
width: 100%; 
height: auto; 
display:block; 
float:left; 
} 

.square-banner img { 
    position:absolute; 
    left:0; 
    -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; 
} 

Из-за изображения position:absolute (чтобы их наложение), то .square-banner не занимают места в высоту. Это настоящая проблема, которую я должен решить.

Answer 1

Следующий фрагмент кода показывает, как вы можете наложить два изображения одного размера, просто сделав одним абсолютным. Другой позволит вам автоматически установить высоту, не требуя плавания. Теперь вы можете перемещаться по #container и изменять его так, как хотите.

var container = document.getElementById('container'); 
 
container.addEventListener('click', function(e){ 
 
    container.className = container.className === 'other' ? '' : 'other'; 
 
});

#container { 
 
    position: relative; 
 
} 
 
#container img { 
 
    opacity: 1; 
 
    -webkit-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
} 
 
#container img:first-child { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: -1; 
 
    opacity: 0; 
 
} 
 
#container.other img { 
 
    opacity: 0; 
 
} 
 
#container.other img:first-child { 
 
    opacity: 1; 
 
}

<div id="container"> 
 
    <img src="http://placehold.it/350x250" /> 
 
    <img src="http://placehold.it/350x250/dd0300" /> 
 
</div>

Нажмите на фрагмент кода, чтобы включить визуальный слой от красного до серого.