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/

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

1 个答案: