Buen día,
Resulta que tengo un contenedor con varias imagenes que se van mostrando de a una como un 'slide show'. No quiero que las imagenes se deformen al cambiar de tamaño la pantalla y eso lo he logrado.
Hasta aquí todo bien, el tema es que cuando agrando la pantalla la imagen se expande mas allá de los limites del contenedor y como el contenedor no se agranda con ella, el footer, que es la div siguiente en el HTML, 'sube' y el resultado es que tengo el footer flotando por la mitad de la pantalla.
He probado varias soluciones y leído todo lo que he podido sobre sticky footer, implementado varias soluciones pero no he logrado el comportamiento deseado. Cualquier ayuda que puedan darme se los agradeceré.
Aquí va el código:
html, body{
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
height:100%;
position:relative;
max-width:2860px;
box-sizing:border-box;
height:100%;
}
#main {
padding:0;
width:100%;
max-width:2860px;
margin: 0 auto;
min-height:100%;
}
.producto{
margin:0 auto;
width:100%;
}
.img_container{
position:absolute;
top:0;
width:100%;
height:100%;
min-width:100%;
}
.producto_images {
width:100%;
}
.producto_images img{
position:absolute;
opacity:0;
width:66%;
}
footer {
display: block;
max-width:2860px;
position:absolute;
width:100%;
}
<html>
<body class="home">
<section id="main">
<div class="producto">
<div class="img_container">
<div class="producto_images">
<img src="./imagenes/imagen1.jpg ?>" alt="" title="" />
<img src="./imagenes/imagen2.jpg ?>" alt="" title="" />
</div>
</div>
</div>
</section>
<footer></footer>
</body>
</html>