Change element dimensions with the ratio another element changed with

Question

I have a Picture with dimensions 835x470, That image is added to 2 elements, A hidden <img> and as a background to a <div> width class wrapper, I set the <div> dimensions to smaller dimensions 519x220 on my screen.

There is a centered circular element on the <div> with the dimensions 100x100, I want to set these dimensions with the same ratio the image changed from 835x470 to 519x220.

So for example if the circle on the original image 835x470 was 200x200, When the <div> dimensions are set/changed to 519x220, The circle would take the same space it took on the original image, Which were 200x200.

So if the 200x200 represented 15% for example from the 835x470, Then the circle would take the same 15% from the new dimensions 519x220

What I tried to do is that I get the natural dimensions of the image 835x470 and get the new dimension of the image 519x220 and divide each dimension to get a ratio, Then check to get the smallest ratio (Not to make the circle be out of the image), Then multiply this ratio by 200 and set it as width and height of the image.

Here is the code:

//Get natural dimensions from the hidden image.
var imgNaturalHeight = document.getElementById('img').naturalHeight,
    imgNaturalWidth = document.getElementById('img').naturalWidth,
    
    //Get new dimensions from the wrapper that has the image as a background.
    imgNewHeight = document.querySelector('.wrapper').height,
    imgNewWidth = document.querySelector('.wrapper').width,

    //Get height and width ratios.
    widthRatio = imgNewWidth / imgNaturalWidth,
    heightRatio = imgNewHeight / imgNaturalHeight,
    
    //Define ratio variable.
    ratio;

//Set ratio to the smallest ratio.
if ( widthRatio < heightRatio ) {
  ratio = widthRatio;
}else{
  ratio = heightRatio;
}

//The new value for width and height
var fixed = ratio * 200;

//Set the new width and height of the circle.
document.querySelector('.overlay').style.width = fixed;
document.querySelector('.overlay').style.height = fixed;

.wrapper{
  position: relative; 
  background: url('https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg');
  height:220px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.image{
  display:none;
}

<div class="wrapper">
    <div class="overlay"></div>
</div>

<img id="img" class="image" src="https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg" >

I hope I made it clear.

@MBo, The circle dimensions is not changed to the new dimensions and I'm not sure if these calculations would achieve what I want — , Sep 04 '18 at 09:27
Calculations look fine. But I see that circle size depends on values in CSS, but couldn't be changed from code (try `..width = 500;`). So problem is not in math, but in JS execution/interaction — MBo, Sep 04 '18 at 09:30
@MBo, if the circle when it was `200x200` represented `15%` for example from the original image dimensions `835x470`, Then the new dimensions should take `15%` from the new dimensions `519x220` — , Sep 04 '18 at 09:35
Yes, it is calculated. But is not applied (I don't know why - not JS guy) — MBo, Sep 04 '18 at 09:37

score 0 · Answer 1 · answered Sep 04 '18 at 09:32

0

So that it takes the same space it took on the original image, Which were 200x200.

Try to follow this steps:

calculate ratio of new to old image with and height
multiply original circle dimensions by its ratio

This should do the trick.

There is some example (maybe not exactly your case but I hope you can adapt it easily).

Example

Note: Im not so sure what you try to achieve in pure JS so I used clientHeight property, you can read about other possibilities here Height and width in JS

answered Sep 04 '18 at 09:32

Jacek Rosłan

333
4
10

I forgot to add `px` at the end, Thanks for that, But on my example after I added the `px` it still not working – Sep 04 '18 at 09:40
`clientHeight` and `clientWidtht` did the effect – Sep 04 '18 at 09:43
its baecuse of this line `imgNewHeight = document.querySelector('.wrapper').height` try to add `alert(imgNewHeight);` somewhere in your code for simple debugging, you will get "undefined", read about getting objects dimensions in JavaScript to know how to get them porperly – Jacek Rosłan Sep 04 '18 at 09:43

score 0 · Answer 2 · answered Sep 04 '18 at 10:02

//Get natural dimensions from the hidden image.
var imgNaturalHeight = document.getElementById('img').naturalHeight,
    imgNaturalWidth = document.getElementById('img').naturalWidth,

    //Get new dimensions from the wrapper that has the image as a background.
    imgNewHeight = document.querySelector('.wrapper').clientHeight,
    imgNewWidth = document.querySelector('.wrapper').clientWidth,

    //Get height and width ratios.
    widthRatio = imgNewWidth / imgNaturalWidth,
    heightRatio = imgNewHeight / imgNaturalHeight,

    //Define ratio variable.
    ratio;

//Set ratio to the smallest ratio.
if ( widthRatio < heightRatio ) {
  ratio = widthRatio;
}else{
  ratio = heightRatio;
}

//The new value for width and height
var fixed = ratio * 200;

//Set the new width and height of the circle.
document.querySelector('.overlay').style.width = fixed + "px";
document.querySelector('.overlay').style.height = fixed + "px"

Change element dimensions with the ratio another element changed with

2 Answers2