Define size in px based on size in %

Asked

Viewed 27 times

3

I’m having trouble developing a resize script

function resizeImagePreview(){
    var imageHolder = document.getElementById("image-holder");
    imageHolder.style.width = "25%";
    console.log(imageHolder.style.width);
    imageHolder.style.height = imageHolder.style.width + "px";
    console.log(imageHolder.style.height);
}resizeImagePreview();

The script shows no errors, however, the element height is not set, what is causing the error, and how to fix ?

javascript

  • First you assign "25%" to width, then defines that heigth will be width + "px", which results in 25%px. It doesn’t seem to make sense. What are the values displayed on the console?

2 answers

4


Your code:

function resizeImagePreview(){
    var imageHolder = document.getElementById("image-holder");
    imageHolder.style.width = "25%";
    console.log(imageHolder.style.width);
    imageHolder.style.height = imageHolder.style.width + "px";
    console.log(imageHolder.style.height);
}resizeImagePreview();

In the third line, you assign the value 25% to the attribute width. In the fifth line, you assign the attribute height the value of width concatenated with the string px. whereas the attribute will have the value 25%, given row 3, the value of height will be 25%px, that doesn’t make any sense and the browser probably discards.

Now, if your intention is to get the value in pixels that the width has after being assigned 25%, then you must use the property offsetWidth of the element. It would look something like:

function resizeImagePreview(){
    var imageHolder = document.getElementById("image-holder");
    imageHolder.style.width = "25%";
    console.log(imageHolder.style.width);
    imageHolder.style.height = imageHolder.offsetWidth + "px";
    console.log(imageHolder.style.height);
}resizeImagePreview();

Take the example:

function resizeImagePreview(){
    var imageHolder = document.getElementById("image-holder");
    imageHolder.style.width = "25%";
    console.log(imageHolder.style.width);
    imageHolder.style.height = imageHolder.offsetWidth + "px";
    console.log(imageHolder.style.height);
}resizeImagePreview();
#image-holder {
  background: blue;
}
<div id="image-holder"></div>

  • 1

    Good, I had forgotten the offsetWidth. Your answer probably performs better than mine.

  • perfect, I also had forgotten offsetWidth

  • One thing I just realized: the offsetWidth will include padding and borders on the account, so attention. It also has the clientWidth, which only includes padding and does not include edges. If that div is with box-sizing: content-box (the standard), none of these properties matches the width if there are edges and/or padding.

  • @bfavaretto Mas padding and border aren’t dimension modifiers? I mean, it makes sense to be considered in width since the element has its width increased with the padding and border, other than margin that does not modify the dimensions.

  • 1

    Yes, it depends on what he wants. It is that the "peculiarities" of the box model + the peculiarities of these properties can confuse.

0

If I understand well what you want, it is necessary to read the width calculated by browser and set the height based on it. Something like this:

var estilos = getComputedStyle(imageHolder);

// estilos.width já é uma string com 'px' no final.
// se quiser como número, usar parseInt(estilos.width, 10)
imageHolder.style.height = estilos.width;

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.