Изменить размеры элемента с соотношением, с которым изменился другой элемент

Question

В этом примере: Пример Fiddle

У меня есть Изображение с размерами 835x470, Это изображение добавляется к 2 элементам, Скрытое <img> и в качестве фона для <div> класса ширины wrapper, я устанавливаю <div> размеры на меньшие размеры 519x220 на моем экране.

На <div> имеется центрированный круговой элемент с размерами 100x100, я хочу установить эти размеры с тем же соотношением, при котором изображение изменилось с 835x470 на 519x220.

Так, например, если окружность на исходном изображении 835x470 была 200x200, когда размеры <div> установлены / изменены на 519x220, окружность заняла бы то же пространство, что и исходное изображение, Которые были 200x200.

Так что, если 200x200 представляет 15%, например, от 835x470, тогда круг будет брать то же 15% из новых измерений 519x220

Я попытался сделать так, чтобы я получил естественные размеры изображения 835x470 и получил новое измерение изображения 519x220 и разделил каждое измерение, чтобы получить соотношение. Затем установите флажок, чтобы получить наименьшее соотношение (Не чтобы сделать круг из изображения), затем умножьте это соотношение на 200 и установите его как width и height изображения.

Вот код:

//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" >

Надеюсь, я дал понять.

Answer 1

//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"

Answer 2

Так что он занимает столько же места, сколько занимал исходное изображение, которые были 200x200.

Попробуйте выполнить следующие действия:

• вычислите соотношение нового к старому изображения с высотой
• умножить исходные размеры круга на его соотношение

Это должно сработать.

Есть некоторый пример (возможно, не совсем ваш случай, но я надеюсь, что вы можете легко адаптировать его).

* * Пример тысячи двадцать-одина * +1022 *

Примечание: я не уверен, что вы пытаетесь достичь в чистом JS, поэтому я использовал свойство clientHeight, о других возможностях вы можете прочитать здесь Высота и ширина в JS