Javascript 反应：缩放而不是调整大小

我有以下代码来调整React中的元素大小。 使用

setEffect

调整元素的大小，同时提供动态

width

和

height

    const [dimensions, setDimensions] = React.useState({
        height: window.innerHeight,
        width: window.innerWidth
    });
    React.useEffect(() => {
        const debouncedHandleResize = debounce(function handleResize() {
            setDimensions({
                height: window.innerHeight,
                width: window.innerWidth
            });
        }, 10);

        window.addEventListener("resize", debouncedHandleResize);

        return (_) => {
            window.removeEventListener("resize", debouncedHandleResize);
        };
    });

    const imgRef = React.useRef()
    if (imgRef.current) {
        const ratio = imgRef.current.naturalWidth / imgRef.current.naturalHeight;
        if (dimensions.width / dimensions.height > ratio) {
            var imageDimensions = {
                width: dimensions.height,
                height: dimensions.height
            };
        } else {
            var imageDimensions = {
                width: dimensions.width,
                height: dimensions.width
            };
        }
    } else {
        var imageDimensions = {};
    }

    return (
    <div>
      Rendered at {dimensions.width} x {dimensions.height}
      <br />
      <img
        ref={imgRef}
        style={{ width: imageDimensions.width, height: imageDimensions.height }}
        src="https://img.freepik.com/free-vector/digital-device-mockup_53876-89354.jpg?size=338&ext=jpg"
      />
    </div>
  );

我希望在高度更改时缩放元素，而不是调整其大小，因此当窗口高度更改时，元素将缩小而不是调整大小。如何做到这一点？保持相同的比率。

从“React”导入React；
从“react dom”导入react dom；
函数MyComponent（）{
const[dimensions，setDimensions]=React.useState({
高度：window.innerHeight，
宽度：window.innerWidth
});
React.useffect（（）=>{
const debouncedHandleResize=debounce（函数handleResize（）{
设置尺寸({
高度：window.innerHeight，
宽度：window.innerWidth
});
}, 10);
window.addEventListener（“调整大小”，取消BouncedHandleresize）；
返回（41;）=>{
removeEventListener（“调整大小”，取消BouncedHandleresize）；
};
});
返回(
以{dimensions.width}x{dimensions.height}呈现


);
}
函数去抖动（fn，ms）{
让定时器；
返回（41;）=>{
清除超时（计时器）；
计时器=设置超时（（)）=>{
定时器=空；
fn.应用（此，参数）；
}，ms）；
};
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

编辑：我找到了另一个选择，但我不知道如何将框链接到windows大小而不是手动大小。

除非我遗漏了什么，否则这只是一个css反模式

如果希望某个元素是屏幕宽度的特定比率，请使用

vh

vw

如果希望某个元素与父元素具有一定比例，请使用

%

如果希望元素与字体一起缩放，请使用

rem

或

em

---

我认为您遇到的问题是您正在将其设置为px（并将其设置为状态，这对记录来说也不是很好，但您正在进行去抖动，这很有帮助）

要保留纵横比，请使用

img.naturalWidth

和

img.naturalHeight

检查原始图像的纵横比

    const [dimensions, setDimensions] = React.useState({
        height: window.innerHeight,
        width: window.innerWidth
    });
    React.useEffect(() => {
        const debouncedHandleResize = debounce(function handleResize() {
            setDimensions({
                height: window.innerHeight,
                width: window.innerWidth
            });
        }, 10);

        window.addEventListener("resize", debouncedHandleResize);

        return (_) => {
            window.removeEventListener("resize", debouncedHandleResize);
        };
    });

    const imgRef = React.useRef()
    if (imgRef.current) {
        const ratio = imgRef.current.naturalWidth / imgRef.current.naturalHeight;
        if (dimensions.width / dimensions.height > ratio) {
            var imageDimensions = {
                width: dimensions.height,
                height: dimensions.height
            };
        } else {
            var imageDimensions = {
                width: dimensions.width,
                height: dimensions.width
            };
        }
    } else {
        var imageDimensions = {};
    }

    return (
    <div>
      Rendered at {dimensions.width} x {dimensions.height}
      <br />
      <img
        ref={imgRef}
        style={{ width: imageDimensions.width, height: imageDimensions.height }}
        src="https://img.freepik.com/free-vector/digital-device-mockup_53876-89354.jpg?size=338&ext=jpg"
      />
    </div>
  );

const[dimensions，setDimensions]=React.useState({
高度：window.innerHeight，
宽度：window.innerWidth
});
React.useffect（（）=>{
const debouncedHandleResize=debounce（函数handleResize（）{
设置尺寸({
高度：window.innerHeight，
宽度：window.innerWidth
});
}, 10);
window.addEventListener（“调整大小”，取消BouncedHandleresize）；
返回（41;）=>{
removeEventListener（“调整大小”，取消BouncedHandleresize）；
};
});
const imgRef=React.useRef（）
如果（imgRef.current）{
常数比=imgRef.current.naturalWidth/imgRef.current.naturalHeight；
if（尺寸.宽度/尺寸.高度>比率）{
变量imageDimensions={
宽度：尺寸。高度，
高度：尺寸。高度
};
}否则{
变量imageDimensions={
宽度：尺寸。宽度，
高度：尺寸。宽度
};
}
}否则{
var imageDimensions={}；
}
返回(
以{dimensions.width}x{dimensions.height}呈现


);

我不确定我是否理解您在寻找什么。您的img标签中是否正在更改为“style={{maxWidth:dimensions.width，maxHeight:dimensions.height}”为您执行此操作？@Viktor W是吗？这离我想做的事情太近了。它实际上在缩放窗口时起作用。但是，当进一步更改窗口大小时，设置固定的

宽度时，图像宽度会变得非常难看。我想要的是能够在更改窗口大小时缩放元素，而不是更改其整体大小。您的解决方案确实可以对其进行缩放，但宽度会出现问题。您可以直接在代码中尝试它。好的，只需“style={{width:dimensions.width}}”就可以了。或者正如Cody E所指出的，只是“style={{{width:“100vw”}}”@Viktor W它仍然有那个难看的宽度。@ViktorW的例子给你们提供了我心目中的刻度类型的概念，谢谢你们的建议。我想要的是，当用户修改窗口大小时，元素（在本例中为图像）应该缩小以适应窗口。也许图像会按照你的建议缩小，但是一个完整的<代码> div <代码>里面有很多元素。考虑执行<代码>移动< /代码>模式吗？当你处于一定的比例下时，你会更改类以匹配移动视口，这是一种非常常见的模式。如果你说的是使用媒体查询，那么在修改窗口高度时，元素在这种情况下不会缩小。它只会根据宽度变化进行缩放。这正是我所想的！非常感谢你。虽然你解决了这个问题，但我还是React的初学者，你的代码对我来说有点复杂，所以我会给它一些时间。无论如何，谢谢你。