title: Images stretched in flex container but cannot use align-self-center
body: <p>I have the following markup (Bootstrap 4):</p>
  
  <pre><code>&lt;div class="col-3 d-flex flex-column"&gt;
      &lt;img class="align-self-center" src="#"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Since the container is flexed, the images are stretching. I'm aware <code>align-self-center</code> will resolve the issue, however, I don't want the image to be centered. I want the image to be <code>align-self-left</code> (left aligned rather than centered), but this stretched the image again.</p>
  
  <p>Any way around this?</p>