Taking the total in pixels of an element passed in variable in percentage

Question

I’m riding a div which must be an exact square, but this square must be based on the square itself width that is being set up with pocentagem (%), but need the total value in pixels.

EX: 5% = 105px

var larguraVideoItemFirst = $('.video-item-first').width()//retorna 5 pois foi setado 5%.
$('.video-item-first').css({'height':larguraVideoItemFirst + 'px'}); //converte usando os 5% como pixel, ficando 5px.

Answer 1

You don’t need JavaScript to maintain the ratio between Width and Height, if you want to keep the Height commensurate with Width, set the Height with vw (viewport width).

If you need Width to be proportional to Height, set the Width with vh (viewport height).

How do you want a perfect square, ie a ratio of 1:1, then the vw of height will equal % of width.

Follow an example below.:

.bloco {
  float: left;  
}

.bloco20 {
  background-color: teal;
  width: 19%;
  height: 19vw;
  margin: 0.5%;
}

.bloco40 {
  background-color: crimson;
  width: 39%;
  height: 39vw;
  margin: 0.5%;
}

<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco40"></div>
<div class="bloco bloco40"></div>
<div class="bloco bloco20"></div>
<div class="bloco bloco20"></div>

Answer 2

The method width gets the current computed width of the element in question (read documentation jQuey).

Then the value of $('.video-item-first').width() will be in px and not in percentage.

Chrome has the inspector of elements, use it and see that the element has the rendered width in px.

See the example below, I set the width of the element to be 30% but the method width returns the value in px:

$(document).ready(function(){
  var $quadrado = $('.quadrado');
	var w = $quadrado.width();
  
  $quadrado.height(w + 'px');
  $quadrado.html("O quadrado tem " + w + "px de largura.");  
});

.quadrado {
  display:block;
  float:left;
  width: 30%;
  height: auto;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="quadrado"></div>

Cases where the value may not match the width of the rendered element or match the value in percentage:

• The parent element have 100px width and width in px will match the value in %.
• When using the property class, the method width returns the value corresponding to the first element found (see an example), then the second element may have a second class (or style inline) which modifies the width indicating that the calculation is wrong.
• Javascript is executed before rendering the element.
• Jquery (v3.1.1) returns the percentage if you check the value too early (when the DOM is not ready yet) and in your CSS you have specified a percentage.