如何使用CSS转换：scale（）；在react中响应地将子div与父div匹配？

我真的被卡住了。我的div包含固定大小的div、文本和图像，以及大量基于像素的定位。我怎样才能将它们包装在另一个div中，并使其缩放以适合包装

这可能非常相似：

scale（）与当前容器的大小有关。 高度和宽度与父容器的大小有关。 在本例中，我只需将height和width设置为100%即可填充父DOM元素。如果必须使用比例-尝试100%。设置高度和宽度后。

比例（）相对于当前容器的大小。 高度和宽度与父容器的大小有关。

---

在本例中，我只需将height和width设置为100%即可填充父DOM元素。如果必须使用比例-尝试100%。设置高度和宽度后。

假设某些元素有一个

.scaled wrapper

类，并且这些元素有一个名为

.scaled content

的子元素。然后我们有一个函数

applyScaling

，它接受一个

.scaled wrapper

元素，并相应地缩放其子元素：

let scaledWrapper=document.getElementsByClassName（'scaled-wrapper'）[0]；
让applyScaling=scaledWrapper=>{
//获取缩放的内容，并立即重置其缩放
让scaledContent=scaledWrapper.getElementsByClassName（'scaled-content'）[0]；
scaledContent.style.transform='scale（1,1）'；
设{width:cw，height:ch}=scaledContent.getBoundingClientRect（）；
设{width:ww，height:wh}=scaledWrapper.getBoundingClientRect（）；
设scaleAmtX=ww/cw；
设scaleAmtY=wh/ch；
scaledContent.style.transform=`scale（${scaleAmtX}，${scaleAmtY}）`；
};
applyScaling（缩放包装器）；
//----代码的其余部分仅用于演示ui----
让变化=（）=>{
设w=parseInt（wInp.value）；
设h=parseInt（hInp.value）；
如果（！isNaN（w））scaledWrapper.style.width=`${w}px`；
如果（！isNaN（h））scaledWrapper.style.height=`${h}px`；
scaledWrapper.getElementsByClassName（'scaled-content'）[0].innerHTML=textInp.value；
applyScaling（缩放包装器）；
};
让wInp=document.createElement（'input'）；
setAttribute（'placeholder'，'input parent width in px'）；
wInp.addEventListener（'input'，change）；
wInp.value='200'；
document.body.appendChild（wInp）；
让hInp=document.createElement（'input'）；
hInp.setAttribute（'placeholder'，'input parent height in px'）；
hInp.addEventListener（“输入”，更改）；
hInp.value='200'；
文件.正文.附件（hInp）；
设textInp=document.createElement（'input'）；
setAttribute（'占位符'，'输入文本内容'）；
textInp.addEventListener（“输入”，更改）；
textInp.value='abc'；
document.body.appendChild（textInp）
.scaled包装器{
位置：绝对位置；
左：10px；上：30px；
宽度：200px；高度：200px；
轮廓：1px纯红；
z指数：1；
}
.缩放内容{
框大小：边框框；
显示：内联块；
变换原点：0；
背景色：#ffd0d0；
z指数：-1；
}
abc
假设某些元素有一个类
.scaled wrapper
，这样的元素有一个名为
.scaled content
的子元素。然后我们有一个函数
applyScaling
，它接受一个
.scaled wrapper
元素，并相应地缩放其子元素：


let scaledWrapper=document.getElementsByClassName（'scaled-wrapper'）[0]；
让applyScaling=scaledWrapper=>{
//获取缩放的内容，并立即重置其缩放
让scaledContent=scaledWrapper.getElementsByClassName（'scaled-content'）[0]；
scaledContent.style.transform='scale（1,1）'；
设{width:cw，height:ch}=scaledContent.getBoundingClientRect（）；
设{width:ww，height:wh}=scaledWrapper.getBoundingClientRect（）；
设scaleAmtX=ww/cw；
设scaleAmtY=wh/ch；
scaledContent.style.transform=`scale（${scaleAmtX}，${scaleAmtY}）`；
};
applyScaling（缩放包装器）；
//----代码的其余部分仅用于演示ui----
让变化=（）=>{
设w=parseInt（wInp.value）；
设h=parseInt（hInp.value）；
如果（！isNaN（w））scaledWrapper.style.width=`${w}px`；
如果（！isNaN（h））scaledWrapper.style.height=`${h}px`；
scaledWrapper.getElementsByClassName（'scaled-content'）[0].innerHTML=textInp.value；
applyScaling（缩放包装器）；
};
让wInp=document.createElement（'input'）；
setAttribute（'placeholder'，'input parent width in px'）；
wInp.addEventListener（'input'，change）；
wInp.value='200'；
document.body.appendChild（wInp）；
让hInp=document.createElement（'input'）；
hInp.setAttribute（'placeholder'，'input parent height in px'）；
hInp.addEventListener（“输入”，更改）；
hInp.value='200'；
文件.正文.附件（hInp）；
设textInp=document.createElement（'input'）；
setAttribute（'占位符'，'输入文本内容'）；
textInp.addEventListener（“输入”，更改）；
textInp.value='abc'；
document.body.appendChild（textInp）
.scaled包装器{
位置：绝对位置；
左：10px；上：30px；
宽度：200px；高度：200px；
轮廓：1px纯红；
z指数：1；
}
.缩放内容{
框大小：边框框；
显示：内联块；
变换原点：0；
背景色：#ffd0d0；
z指数：-1；
}
abc
使用@Gershom的代码片段，但保持纵横比


let scaledWrapper=document.getElementsByClassName（'scaled-wrapper'）[0]；
让applyScaling=scaledWrapper=>{
//获取缩放的内容，并立即重置其缩放
让scaledContent=scaledWrapper.getElementsByClassName（'scaled-content'）[0]；
scaledContent.style.transform='scale（1,1）'；
设{width:cw，height:ch}=scaledContent.getBoundingClientRect（）；
设{width:ww，height:wh}=scaledWrapper.getBoundingClientRect（）；
//设scaleAmtX=ww/cw；
//设scaleAmtY=wh/ch；
让我们来看看