內聯樣式縱橫比在 React 中不起作用

Question

這是 React 內聯樣式的問題嗎？ 我有一個裁剪組件，我想根據傳入圖片的縱橫比更改裁剪視圖。

當我將變量傳遞給 Crop 時：

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

我的Crop.js組件中有：

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

但變化不顯示。 但是，當我用整數（即 1/2）編寫常規縱橫比時，它確實發生了變化。 有沒有辦法按照我嘗試的方式完成此操作？ 它將幫助我處理多個組件。

Answer 1

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}