Tengo dos filas en bootstrap. En la primera fila una col con una imagen con posición absoluto pero responsive. El problema es que la segunda fila se superpone sobre la imagen.
¿Cómo hago para que el alto del div que contiene la imagen sea responsive y cambie de tamaño al igual que la imagen?
Si uso height 100% sigue igual y si uso medida en px deja de ser responsive acá el ejemplo.
En vista que de esa forma no tuvo solución, estoy intentando con JavaScript.
Tengo una función con la que pretendo aumentar el el alto del div que contiene a la imagen pero no me funciona.
Este es el código (también en jsfiddle)
function myFunction() {
var alto = document.getElementById("pic").style.height;
document.getElementById("bigPic").style.height = alto;
}
//funcion que asigne al id #bigPic la altura de la imagen #pic + 10px o 10% al cargar la pagina
/* Es decir que el div que contiene la imagen la alura se la de la imagen mas unos pixeles o % de mas */
.color1 {
background: red;
}
.color2 {
background: green;
}
#bigPic img {
width: 80%;
height: auto;
top: 10%;
left: 10%;
position: absolute;
}
#bigPic {
background: #F7A3A4;
width: 90%;
position: relative;
}
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body onload="myFunction()">
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-6 col-sm-8 color1">
<div id="bigPic">
<!-- div al que debo asignarle la altura-->
<img id="pic" src="http://lorempixel.com/200/250/" alt="" />
<!-- img donde tomo la medida-->
</div>
</div>
<div class="col-xs-6 col-sm-4 color1">.col-md-4</div>
</div>
<div class="row">
<div class="col-sm-8 color2">.col-md-8</div>
<div class="col-sm-4 color2">.col-md-4</div>
</div>
</div>
</body>