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

EN

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;
}