title: Maintain aspect ratio according to width and height
body: <p>It is possible to fit and center a square <code>div</code> in the viewport and always maintain it's <strong>aspect ratio according to width and height</strong>?</p>
  
  <p>Requirements :</p>
  
  <ul>
  <li>only CSS</li>
  <li>the size of the square must adapt to the smallest dimension (width or height) of viewport regardless of the orientation (landscape or portrait) of the viewport.</li>
  <li>the square must be centered horizontaly and verticaly in the viewport</li>
  </ul>
  
  <p>Example:</p>
  
  <p><img src="https://i.stack.imgur.com/nKS55.png" alt="Maintain aspect ratio according to width and height of viewport"></p>