Javascript 如何在CSS中仅使用百分比创建圆形图像？

当我试图仅使用百分比制作圆形图像时，它失败了。

为什么我要这样做？因为它可以让我创建非常模块化的函数来处理元素的大小，同时使它们响应速度更快

这里是我的沙箱：

这里是我的代码片段：

const generateStyle=(sizeReference)=>{
  let unity="%" // FAIL TO MAKE CIRCULE WHEN I USE PERCENTAGES HERE
  // console.log(sizeReference+unity)
  return {
    height:sizeReference+unity,
    width:sizeReference+unity,
    borderRadius:(sizeReference/2)+unity
  }
}

function App() {
  return (
    <div className="photo_slider">
      <div className="pic1">
        <img 
          src="https://wallpapercave.com/wp/Nduz52P.jpg" 
          alt="awesome_image"
          style={generateStyle(30)}
        />
      </div>
      <div className="pic2">
        <img 
          src="https://wallpapercave.com/wp/5MsoNXS.jpg" 
          alt="awesome_image"
          style={generateStyle(15)}
          />
      </div>
      <div className="pic3">
        <img 
          src="https://wallpapercave.com/wp/Nduz52P.jpg" 
          alt="awesome_image"
          style={generateStyle(80)}
        />
      </div>
      <div className="pic4">
        <img 
          src="https://wallpapercave.com/wp/5MsoNXS.jpg" 
          alt="awesome_image"
          style={generateStyle(35)}
        />
      </div>
      <div className="pic5">
        <img 
          src="https://wallpapercave.com/wp/Nduz52P.jpg" 
          alt="awesome_image"
          style={generateStyle(60)}
        />
      </div>
    </div>
  );
}

.photo_slider{ 
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  background: beige;
}

如何仅使用百分比制作圆形图像

任何暗示都很好，

---

谢谢

我想您只是希望所有图像都显示为圆形

改变这个

borderRadius:(sizeReference/2)+unity

对此

borderRadius: "50%"

对于真正的圆，宽度和高度仅使用尺寸参考。

以

css

的方式进行
由于非方形图像即使具有

边界半径：“50%”

---

实现这一点的最佳方法是将图像放置在方形容器中，并声明

borderRadius:“50%”；溢出：“在容器上隐藏”

。

您是否尝试过将

边界半径设置为固定值
50%
？谢谢，它会返回一些椭圆形表单，在您的浏览器上如何？这种方式很有效，但问题是框不是方形的，因此您最终得到的是椭圆形，而不是圆形@因为你的尺寸不是完美的正方形，所以你不能让它们变成圆形；这是没有意义的。如果你想让圆去掉单位，就用尺寸来表示高度和宽度。谢谢你的回答，我已经试过了，但失败了，你是什么意思，你能精确点吗？同时，我也尝试过这样做：，在使图像变圆之前先将其转换为正方形，但如果只进行高度：尺寸参考，宽度：尺寸参考，则由于尺寸相同，因此始终会有一个圆。