Problem is absolute bootstrap positioning

Question

Problem is absolute bootstrap positioning

Navigation

#1 by (0 votes)

1

I have two rows in bootstrap. In the first row a cabbage with an image with absolute but responsive position. The problem is that the second row is superimposed on the image.

How do I make the height of the div containing the image responsive and change its size as the image?

If I use height 100% it remains the same and if I use size in px it stops being responsive here the example.

Since that way there was no solution, I'm trying with JavaScript.

I have a function with which I intend to increase the height of the div that contains the image but it does not work for me.

This is the code (also in 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>

javascript css bootstrap

asked by Daniel 23.05.2017 в 07:44

source

1 answer

Magento 2.1.6 - MercadoPago Web service Google or similar

score 0 · Answer 1

But if you want both the image and the divs to have a size relationship and a responsive behavior using bootstrap, why do you use absolute positioning for the image?

Look at this example to see if it fits what you want:

#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>