如何缩放像图像一样的元素？

Question

当图像缩放到百分比比例时，它会保留其长宽比（如果正确完成）。 我需要一个div来模仿这种行为。

我的情况是我需要相对于图像准确定位元素。 图片大小为浏览器宽度的100％，高度可变。 我想使用像素尺寸来确定尺寸和将div放置在距图像边缘正好 800像素的位置，但要使用图像的像素作为尺寸（而不是浏览器像素）。 有没有办法做到这一点？

可以用百分比计算水平位置，但是在我的情况下垂直百分比不起作用。

我可以使用Javascript / JQuery或SASS，欢迎您回答，但我更喜欢纯CSS解决方案。

如果没有意义，请使用jsfiddle，其中包含更多信息： https ://jsfiddle.net/ckcmrs1g/1/

Answer 1

我从这个答案中得到了启发： 确定图像跨浏览器的原始大小？

我进行了一些调整，将其放入函数中，并在加载和调整大小时调用它，因此在调整浏览器窗口大小时会重新计算大小。

这是功能代码：

function fitIn10Pixels() {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      var widthRatio = $(".redbox img").width()/width;
      var heightRatio = $(".redbox img").height()/height;
      var tenFromLeft = 10*widthRatio;
      var tenFromTop = 10*heightRatio;

      $(".bluebox img").css("left",tenFromLeft+"px");
      $(".bluebox img").css("top",tenFromTop+"px");
      $(".bluebox img").css("height",$(".redbox img").height()-2*tenFromTop+"px");
      $(".bluebox img").css("width",$(".redbox img").width()-2*tenFromLeft+"px");
    };

    newImg.src = $(".redbox img")[0].src; // this must be done AFTER setting onload
}

您可以在这里查看小提琴： https : //jsfiddle.net/ckcmrs1g/9/