title: How create circular image using only percentages in CSS?
body: <p><strong>When I m trying to make circular image using only percentages it just fails.</strong> </p>
  
  <p><strong><em>Why I want that?</em></strong> because it would allow me to create greatly modular functions to handle size of my element, and make them responsive in the same time.</p>
  
  <p><strong>Here my sandbox</strong>: <a href="https://stackblitz.com/edit/react-kkbyff" rel="nofollow noreferrer">https://stackblitz.com/edit/react-kkbyff</a></p>
  
  <p><strong>here my reactjs snippet:</strong></p>
  
  <pre><code>const generateStyle=(sizeReference)=&gt;{
    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 (
      &lt;div className="photo_slider"&gt;
        &lt;div className="pic1"&gt;
          &lt;img 
            src="https://wallpapercave.com/wp/Nduz52P.jpg" 
            alt="awesome_image"
            style={generateStyle(30)}
          /&gt;
        &lt;/div&gt;
        &lt;div className="pic2"&gt;
          &lt;img 
            src="https://wallpapercave.com/wp/5MsoNXS.jpg" 
            alt="awesome_image"
            style={generateStyle(15)}
            /&gt;
        &lt;/div&gt;
        &lt;div className="pic3"&gt;
          &lt;img 
            src="https://wallpapercave.com/wp/Nduz52P.jpg" 
            alt="awesome_image"
            style={generateStyle(80)}
          /&gt;
        &lt;/div&gt;
        &lt;div className="pic4"&gt;
          &lt;img 
            src="https://wallpapercave.com/wp/5MsoNXS.jpg" 
            alt="awesome_image"
            style={generateStyle(35)}
          /&gt;
        &lt;/div&gt;
        &lt;div className="pic5"&gt;
          &lt;img 
            src="https://wallpapercave.com/wp/Nduz52P.jpg" 
            alt="awesome_image"
            style={generateStyle(60)}
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.photo_slider{ 
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    background: beige;
  }
  </code></pre>
  
  <p>How make circular image using only percentages? </p>
  
  <p>Any hint would be great,
  thanks</p>