How to make image flex to it's width?
<p>how do I prevent my image from being stretched over it's natural 200px width?</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>footer {
  display: flex;
}
img {
  flex: 1;
  margin: 1em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;footer&gt;
  &lt;img src=http://www.placebacon.net/200/150&gt;
&lt;/footer&gt;</code></pre>
</div>
</div>
</p>