1

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>

2
  • El posicionamiento absoluto es necesario porque uso un script de un slideshow y y con posición relative mientras cambia de una imagen a la otra aparece la nueva imagen aparece debajo de la anterior estirando el div hacia abajo, deformado la estructura aca un ejemplo jsfiddle.net/Lerzjjoj
    – Daniel
    Commented el 23 may. 2017 a las 13:25
  • con js/jquery como podria asignar el alto del div con id #bigPic sea el alto de la imagen + 20px?? alguien me ayuda?? por favor
    – Daniel
    Commented el 23 may. 2017 a las 18:51

1 respuesta 1

0

Pero si quieres que tanto la imagen como los divs tengan una relación de tamaño y un comportamiento responsive utilizando bootstrap ¿por qué utilizas posicionamiento absoluto para la imagen?

Mira este ejemplo a ver si se ajusta a lo que pretendes:

#bigPic {
	background: #F7A3A4;
}
#bigPic img {
  width: 100%;
  padding: 10%;
}
.color2 {
  background: red;
}
.color1 {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<section class="container-fluid text-center">
  <article class="row"> <!--1-->
    <div class="col-xs-12 col-sm-8 color1"><!--1a-->
      <div id="bigPic">
        <img src="http://lorempixel.com/550/450/sports/1/fila%201-col%201/"  alt="" />
      </div>
    </div>
            
    <div class="col-xs-12 col-sm-4 color1"><!--1b-->
      Col 1b
    </div>
  </article>
   <article class="row"> <!--2-->
    <div class="col-xs-12 col-sm-8 color2"><!--2a-->
      Fila 2 Col 1
    </div>
            
    <div class="col-xs-12 col-sm-4 color2"><!--2b-->
      Fila 2 Col 2
    </div>
  </article>
</section>

1
  • Gracias por responder, el posicionamiento absoluto es necesario ya que con relative por el bug que hay mientras cambia de una imagen a la otra. Realmente no se hacerlo de otra forma me ha resultado solo con pos absolute aca un ejemplo del bug jsfiddle.net/Lerzjjoj
    – Daniel
    Commented el 23 may. 2017 a las 13:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.