title: Maintain aspect ratio of background-image
body: <p>I need to present images in a container using the CSS property <code>background-image</code></p>
  <p>The problem here is that I need to present every image keeping the aspect ratio of it, and maximize the presentation of the image to the <code>height</code> or <code>width</code> of the image centered inside the container.</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;div class=&quot;fotowind shadow&quot;&gt;&lt;/div&gt;
  </code></pre>
  <hr />
  <h3>EDIT:</h3>
  <p>Initial CSS properties of the <code>.fotowind</code> container:</p>
  <pre><code>.fotowind {
      overflow:hidden;
      margin-left:10px;
      background:#333;
      margin-bottom:5px;
      z-index:30;
      background-position: center center !important;
      background-repeat: no-repeat;
  } 
  </code></pre>
  <p>Code to build the properties dynamically based in the size of the window - I need to resize the image keeping the ratio, even of some empty space as to remain on the sides:</p>
  <p><strong>jQuery:</strong></p>
  <pre><code>windowWidth = $(window).width();
  windowHeight = $(window).height();
  
  if (windowWidth &lt;= 1200 &amp;&amp; windowWidth &gt; 768 || windowHeight &lt; 900)
  {
      $('.fotowind').css('width', '650px').css('height', '425px');
  }
  else if (windowWidth &gt; 1200 || windowHeight &gt; 900)
  {
      $('.fotowind').css('width', '950px').css('height', '650px');
  }
  
  if (windowWidth &lt;= 768)
  {
      $('.fotowind').css('width', '450px').css('height', '425px');
  }
  </code></pre>
  <p><strong>Resulting HTML:</strong></p>
  <pre><code>&lt;div class=&quot;fotowind shadow&quot; style=&quot;background-image: url(http://localhost/AdPictures/25/2c/c2/4c/-9/77/1-/4b/77/-b/ff/a-/57/e5/10/2b/31/b1/7516_1_xl.jpg); background-size: 100%; width: 950px; height: 650px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>In some situations where an image has size <code>800x600</code>, for example, I can't present it with this size, or when the image has <code>200x650</code>, for example, it deforms to the container size.</p>
  <p><img src="https://i.stack.imgur.com/8qFvb.jpg" alt="Example" /></p>