title: How can I fill a div with an image while keeping it proportional?
body: <p>I found this thread — <a href="https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat">How do you stretch an image to fill a &lt;div&gt; while keeping the image&#39;s aspect-ratio?</a> — that is not entirely the thing that I want.</p>
  <p>I have a <code>div</code> with a certain size and an image inside of it. I want to <strong>always</strong> fill-out the <code>di</code>v with the image regardless if the image is landscape or portrait. And it doesn't matter if the image is cut-off (the div itself has overflow hidden).</p>
  <p>So if the image is portrait I want the <code>width</code> to be <code>100%</code> and the <code>height:auto</code> so it stays in proportion. If the image is landscape I want the <code>height</code> to be <code>100%</code> and the <code>width to be </code>auto`. Sounds complicated right?</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
     &lt;img src=&quot;some-image.jpg&quot; alt=&quot;Could be portrait or landscape&quot;/&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Since I don't know how to do it I simply created a quick image of what I mean. I can't even properly describe it.</p>
  <p><img src="https://i.stack.imgur.com/pIDgy.jpg" alt="enter image description here" /></p>
  <p>So, I guess I'm not the first one asking this. However I couldn't really find a solution to this. Maybe there is some new CSS3 way of doing this - I'm thinking of flex-box. Any idea? Maybe it's even easier than I expect it to be?</p>