title: Image height same as width
body: <p>I have an image inside of a container and I want it to be a perfect square. I'm setting my width to be 100% of the container and the goal is to get the <code>height</code> of the image to be the same as the width, as I don't know what size the container will be due to responsive design.</p>
  
  <p>Any ideas? I'm using sass, if that helps..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  width: 50%;
  }
  
  .container img {
    width: 100%;
    height: 400px; //this should be the same as the width value..
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;&lt;img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260"/&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Preferably no javascript solution, but maybe it's not possible otherwise?</p>