Question

我有一个尺寸为835x470的{{3}}，该图像被添加到2个元素中，一个隐藏的<img>，并作为<div>宽度类{{1 }}，我将屏幕上的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;
}

我希望我说清楚了。

Answer 1

因此它所占用的空间与原始图像上的空间相同，为200x200。

尝试执行以下步骤：

计算具有高度的新旧图像的比例
将原始圆的尺寸乘以其比例

这应该可以解决问题。

有一些例子（也许不完全是您的情况，但我希望您可以轻松地进行调整）。

Example

注意：我不太确定您尝试使用纯JS实现什么，所以我使用了clientHeight属性，您可以在Height and width in JS此处了解其他可能性

Answer 2

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

用另一个元素更改的比例更改元素尺寸

2 个答案: