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

Question

当图像按百分比缩放时，它会保持其纵横比（如果操作正确）。我需要一个div 来模拟这种行为。

我的情况是我需要相对于图像准确定位元素。图像大小为浏览器宽度的 100%，高度可变。我想使用像素测量来调整大小并将 div 恰好放置在距离图像边缘 800 像素的位置，但使用 图像的像素 作为测量值（而不是浏览器像素） .有没有办法做到这一点？

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

我可以使用 Javascript/JQuery 或 SASS，这些答案是受欢迎的，但我更喜欢纯 CSS 解决方案。

如果没有意义，这里有一个包含更多信息的 jsfiddle：https://jsfiddle.net/ckcmrs1g/1/

Answer 1

我受到这个答案的启发：Determine original size of image cross browser?

我稍微调整了一下，把它放在一个函数中，并在加载和调整大小时调用它，所以在调整浏览器窗口大小时会重新计算大小。

函数代码如下：

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/