内联样式纵横比在 React 中不起作用

Question

Is this an issue with React inline styling? I have a Crop component where I want to change the crop view based on the aspect ratio of the pic coming in.

When I pass the variables to Crop:

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

I have in my Crop.js component:

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

But the changes don't show. However, when I write a regular aspect ratio with integers (ie, 1/2) it does change. Is there a way to accomplish this the way I'm trying to? It'll help me with multiple components.

Answer 1

aspectRatio expect a value of type <ratio> , and you are giving it a calc . The example below works:

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

Also, pass them as numbers instead of strings:

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