javascript 内联样式纵横比在React中不工作

yvt65v4c 于 2023-01-11 发布在 Java

关注(0)|答案(1)|浏览(104)

这是一个问题与React内联样式？我有一个裁剪组件，我想改变裁剪视图的基础上，纵横比的图片进来。
当我将变量传递给Crop时：

<Crop width={"200"} height={"100"}

我的Crop.js组件中有：

<div style={{aspectRatio: `calc(${width}px / ${height}px)` }}>
</div>

但是变化并没有显示出来。然而，当我用整数（即1/2）写一个规则的纵横比时，它确实发生了变化。有没有办法像我尝试的那样完成这个过程？它会帮助我处理多个组件。

JavaScript

来源：https://stackoverflow.com/questions/75076391/inline-style-aspect-ratio-not-working-in-react

1条答案

按热度按时间

yjghlzjz1#

aspectRatio需要一个<ratio>类型的值，而您给它的是一个calc。下面的示例有效：

export default function App() {
  const width = 200;
  const height = 60;
  return (
    <div
      style={{
        aspectRatio: width / height,
        background: "red"
      }}
    ></div>
  );
}

另外，将它们作为数字而不是字符串传递：

<Crop width={200} height={100}

赞(0）回复(0）举报 2023-01-11

我来回答

javascript 内联样式纵横比在React中不工作

1条答案

相关问题

热门标签

最新问答