gpt4 book ai didi

javascript - 按比例缩放以适合容器内部

转载 作者:行者123 更新时间:2023-12-03 12:27:12 26 4
gpt4 key购买 nike

enter image description here

我有一个#fixed-div和一个#resize-div,尺寸如下:

#fixed-div

=> width :: 550px;
=> height:: 450px;

并且#resize-div是动态的。

现在,我想将 #resize-div 的缩放 CSS 应用到 #fixed-div 内部,如上图所示。

我正在尝试计算 #resize-div 的缩放值,假设我有以下 #resize-div 尺寸:

=> width :: 650px;
=> height:: 1100px;

那么,你会如何计算这里的比率。 (我花了大约三天的时间,但还是不明白我该怎么办?)

请帮助我解决这个问题。

最佳答案

var ratioX = biggerX / smallerX;
var ratioY = biggerY / smallerY;

if (ratioX > ratioY) {
var zoom = ratioX;
} else {
var zoom = ratioY;
}

然后将缩放属性设置为元素:

$('.inner').css({
'transform': 'scale('+zoom+','+zoom+')' //remember to use vendor prefixes
});

您需要在内部设置 transform-origin: 0% 0%;

关于javascript - 按比例缩放以适合容器内部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24140655/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com