如何缩放图像等元素？

当图像缩放到百分比比例时，它会保留其纵横比（如果正确完成）。我需要一个div来模拟这种行为。如何缩放图像等元素？

我的情况是我需要准确地定位一个元素与图像的关系。图像的大小为浏览器宽度的100％，并且高度可变。我想用像素尺寸来放置一个距离图像边缘800像素，但使用图像的像素作为测量（而不是浏览器像素）。有没有办法做到这一点？

以百分比计算水平位置是可能的，但垂直百分比不适用于我的情况。

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

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

来源

2016-05-12 Blue_Dragon360

像这样的事情？ https://jsfiddle.net/ckcmrs1g/2/ –

@VincentG我不认为那就是那么简单 - 如果你缩小窗口的大小，你会看到蓝色框不会与红色边框保持齐平的形象。 – Serlite

我不太确定，但是你在寻找这种效果：https：//jsfiddle.net/ckcmrs1g/5/？ – drip

我得到这个答案的启发：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/

来源

2016-05-12 19:43:05

美丽！经过一些修改，这完美运作。虽然问题很快（我对JS不太好）：这条线是什么？ 'newImg.src = $（“。redbox img”）[0] .src;'我能想到的最接近的是它处理''的来源，但我想知道为什么这是必要的（什么是与数组在最后）？ –

其实，没关系。只是想通了（通过jquery设置源代码到redbox）。谢谢！ –

如何缩放图像等元素？

回答

相关问题