title: Resize background-image before applying contain/cover
body: <h1>General question:</h1>
  
  <p>I want to resize a CSS background image (without keeping the aspect ratio) and <em>then</em> apply a <code>background-size: contain</code> to that same image. Doing it the other way around would somewhat cancel out the effect of the <code>contain</code> option.</p>
  
  <p>Can this be done with HTML/CSS or is it necessary to bring Javascript into this? Editing the images manually beforehand is not doable in my use case.</p>
  
  <h1>My use case:</h1>
  
  <p><a href="http://jsfiddle.net/h5a2nxfd/68/" rel="nofollow noreferrer">http://jsfiddle.net/h5a2nxfd/68/</a></p>
  
  <p>I have some pictures I'd like to display with altered aspect ratio side-to-side or top-to-bottom, depending on whether landscape or portrait mode is active. The JSFiddle above lacks the size altering.</p>
  
  <p>I have tried using <code>transform</code> to apply scaling, but in the current solution the width/height of <code>div.item</code> is variable so it is not very doable.</p>
  
  <p>I'm open to your suggestions. I might be trying to approach this problem from a wrong angle. But I'd prefer to not use Javascript.</p>
  
  <p>EDIT: Added circles to the sample SVG images used in the JSFiddle.</p>