Height of the total div proportional to the content

Navigation
1

I have the following structure: 

<div class="slideShow">
  <div class="boxSlide">
     <div class="imagens">
       <img src="_imgs/_slideShow/1.png" />
       <img src="_imgs/_slideShow/2.png" />
       <img src="_imgs/_slideShow/3.png" />
     </div>
     <div class="anterior">
        <span class="setaSpan"><</span>
        <span class="boxSpan"></span>
     </div>
     <div class="proximo">
        <span class="setaSpan">></span>
        <span class="boxSpan"></span>
      </div>
  </div>
  <div class="contador">
     <span class="contaSlide">1</span>
     <span class="contaSlide">2</span>
     <span class="contaSlide">3</span>
  </div>
</div>
TESTE

I would like to know if there is a way to make the height of div.slideShow automatically adjusted to the height of the div's of its interior.

The idea here is for the browser to be adjusted (screen sizes) and the ratio stays the same.

Before div.slideShow , only body exists.

What I want to do is that, as the screen is being resized, or by pulling the broads of the browser or even through pre-set screens (nb's, tablet's, cell phones, etc ...) ), the height of the div.slideShow , is adjusted to the height of your inner content that is already being resized correctly.

However, if I give fixed height to div.slideShow , when the images decrease in size, I will have problems.

Imagine the following situation: Imagine that in div.img I have a imagem with 300px of height and resolve to change to another of 400px of height or even 200px . Keeping fixed height in div.slideShow , I'll have problems. Hence the need for automatic adjustment .

How do I solve this problem?

Below the code running: 

$(document).ready(function(e) {

  quantasImagens = $("div.slideShow div.boxSlide div.imagens img").length-1;
  contador = 0;
	
  $("div.slideShow div.boxSlide div.anterior").click(function() {
	  contador = contador==quantasImagens ?  -1 : contador;
	  contador++;
	  $("div.slideShow div.boxSlide div.imagens img").css("opacity",0);
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("opacity",1);
  });
  
  $("div.slideShow div.boxSlide div.proximo").click(function() {
	  contador = contador==0 ? quantasImagens+1 :  contador;
	  contador--;
	  $("div.slideShow div.boxSlide div.imagens img").css("opacity",0);
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("opacity",1);
  });
  
  $("div.slideShow div.contador span.contaSlide").click(function() {
	  index = $(this).index();
	  $("div.slideShow div.boxSlide div.imagens img").css("opacity",0);
	  $("div.slideShow div.boxSlide div.imagens img").eq(index).css("opacity",1);
  });
  
});
 * {
	 margin:0;
	 padding:0;
 }
  
div.slideShow {
	position: relative;
	width: 100%;
	height:300px;
}
div.slideShow div.boxSlide,
div.slideShow div.contador {
	position: relative;
	display: block;
	width: 100%;
}
div.slideShow div.boxSlide{
	height:277px;
}
div.slideShow div.boxSlide div.imagens img {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	width: 100%;
}
div.slideShow div.boxSlide div.imagens img:first-child {
	opacity: 1;
}
div.slideShow div.boxSlide div.anterior,  
div.slideShow div.boxSlide div.proximo {
	position: absolute;
	display: block;
	top: 100px;
}
div.slideShow div.boxSlide div.anterior {
	left: 100px;
}
div.slideShow div.boxSlide div.proximo {
	right: 100px;
}
div.slideShow div.boxSlide div.anterior span, 
div.slideShow div.boxSlide div.proximo span {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
}
div.slideShow div.boxSlide div.anterior span.boxSpan, 
div.slideShow div.boxSlide div.proximo span.boxSpan {
	background-color: rgb(200,200,200);
	opacity: .5;
	z-index: 1;
}
div.slideShow div.boxSlide div.anterior span.setaSpan, 
div.slideShow div.boxSlide div.proximo span.setaSpan {
	line-height: 30px;
	text-align: center;
	font-weight: bolder;
	cursor: pointer;
	z-index: 2;
}
div.slideShow div.boxSlide div span.setaSpan:hover + span.boxSpan {
	opacity: 1;
}
div.slideShow div.contador {
	/*top:240px;*/
	background-color:rgba(240,240,240,.5);
}
div.slideShow div.contador span.contaSlide {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: rgb(200,200,200);
	cursor: pointer;
	opacity: .5;
}
div.slideShow div.contador span.contaSlide:hover {
	opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="slideShow">
  <div class="boxSlide">
     <div class="imagens">
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png"/><imgsrc="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" />
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png"/></div><divclass="anterior">
        <span class="setaSpan"><</span>
        <span class="boxSpan"></span>
     </div>
     <div class="proximo">
        <span class="setaSpan">></span>
        <span class="boxSpan"></span>
      </div>
  </div>
  <div class="contador">
     <span class="contaSlide">1</span>
     <span class="contaSlide">2</span>
     <span class="contaSlide">3</span>
  </div>
</div>
oi
    
asked by anonymous 20.10.2017 / 11:57

2 answers

1

What does this is the position: absolute that strips the element from the normal flow of the page. To resolve without position: absolute do so:

First in your class .boxSlide leave it with height: auto to adapt it to the content size: 

div.slideShow div.boxSlide {
    height:auto;
}

Then remove position: absolute from your images so that they return to the normal flow of the page and hide them with display: none instead of opacity: 0 so that images that are not shown will not take up space below : 

div.slideShow div.boxSlide div.imagens img {
    width: 100%;
    height: auto;
    display: none;
}

And finally we leave the first image with display: block : 

div.slideShow div.boxSlide div.imagens img:first-child {
    display: block;
}

Now in your Javascript instead of changing the opacity of the images we change the display (do it in other sections): 

  $("div.slideShow div.boxSlide div.imagens img").css("display", "none");
  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display", "block");

Complete code working: 

$(document).ready(function(e) {

  quantasImagens = $("div.slideShow div.boxSlide div.imagens img").length-1;
  contador = 0;
	
  $("div.slideShow div.boxSlide div.anterior").click(function() {
	  contador = contador==quantasImagens ?  -1 : contador;
	  contador++;
	  $("div.slideShow div.boxSlide div.imagens img").css("display", "none");
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display", "block");
  });
  
  $("div.slideShow div.boxSlide div.proximo").click(function() {
	  contador = contador==0 ? quantasImagens+1 :  contador;
	  contador--;
	  $("div.slideShow div.boxSlide div.imagens img").css("display", "none");
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display", "block");
  });
  
  $("div.slideShow div.contador span.contaSlide").click(function() {
	  index = $(this).index();
	  $("div.slideShow div.boxSlide div.imagens img").css("display", "none");
	  $("div.slideShow div.boxSlide div.imagens img").eq(index).css("display", "block");
  });
  
});
* {
	 margin:0;
	 padding:0;
 }
  
div.slideShow {
	position: relative;
	width: 100%;
	height:300px;
}
div.slideShow div.boxSlide,
div.slideShow div.contador {
	position: relative;
	display: block;
	width: 100%;
}
div.slideShow div.boxSlide{
	height:auto;
}
div.slideShow div.boxSlide div.imagens img {
	width: 100%;
	height: auto;
	display: none;
}
div.slideShow div.boxSlide div.imagens img:first-child {
	display: block;
}
div.slideShow div.boxSlide div.anterior,  
div.slideShow div.boxSlide div.proximo {
	position: absolute;
	display: block;
	top: 100px;
}
div.slideShow div.boxSlide div.anterior {
	left: 100px;
}
div.slideShow div.boxSlide div.proximo {
	right: 100px;
}
div.slideShow div.boxSlide div.anterior span, 
div.slideShow div.boxSlide div.proximo span {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
}
div.slideShow div.boxSlide div.anterior span.boxSpan, 
div.slideShow div.boxSlide div.proximo span.boxSpan {
	background-color: rgb(200,200,200);
	opacity: .5;
	z-index: 1;
}
div.slideShow div.boxSlide div.anterior span.setaSpan, 
div.slideShow div.boxSlide div.proximo span.setaSpan {
	line-height: 30px;
	text-align: center;
	font-weight: bolder;
	cursor: pointer;
	z-index: 2;
}
div.slideShow div.boxSlide div span.setaSpan:hover + span.boxSpan {
	opacity: 1;
}
div.slideShow div.contador {
	/*top:240px;*/
	background-color:rgba(240,240,240,.5);
}
div.slideShow div.contador span.contaSlide {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: rgb(200,200,200);
	cursor: pointer;
	opacity: .5;
}
div.slideShow div.contador span.contaSlide:hover {
	opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="slideShow">
  <div class="boxSlide">
     <div class="imagens">
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png"/><imgsrc="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" />
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png"/></div><divclass="anterior">
        <span class="setaSpan">anterior</span>
        <span class="boxSpan"></span>
     </div>
     <div class="proximo">
        <span class="setaSpan">proximo</span>
        <span class="boxSpan"></span>
      </div>
  </div>
  <div class="contador">
     <span class="contaSlide">1</span>
     <span class="contaSlide">2</span>
     <span class="contaSlide">3</span>
  </div>
</div>
    
20.10.2017 / 12:28
0

Since the images have position: absolute , I suggested that you give a height fixed to the images, for example 500px and then to div that height .

    
20.10.2017 / 12:58
Doubt in exercise query on sql Positioning components vertically with GridBagLayout