title: crop an image responsively keeping the center of the image visible (horizontally)
body: <p>Here is the website I need help with: www.aaronrhoades.com/blog
  The header image grows when it's on a bigger browser (e.g. on a TV screen) and shrinks when it's on a smaller browser. BUT, it stops shrinking at a certain point because I don't want it to get too small. </p>
  
  <p><strong>The problem:</strong> once the image stops shrinking then it stays glued in one spot horizontally based on the left side of the image. I want it to move left so that the logo stays visible. Something like a "margin-left:-50%;" would work for mobile, but obviously that messes it up on a full screen.</p>
  
  <p>CSS only would be great if possible, otherwise I am ok with jquery. PHP might be good since this is a wordpress, I'm just not too familiar with it. Here is my code:</p>
  
  <pre><code> #nicelogo{
      overflow:hidden;
   }
   #nicelogo img{
      width: 100%;
      min-width: 683px;
      min-height: 250px;
      text-align:center;
      margin-left:auto;
      margin-right:auto;
   }
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>&lt;div id="header"&gt; 
  &lt;div id="nicelogo"&gt;
  &lt;img src="http://www.aaronrhoades.com/images/web-header-home.jpg" width="1366" height="500"&gt;
  &lt;/div&gt;!-- end of #nicelogo --&gt;
  &lt;/div&gt;!-- end of #header --&gt;
  </code></pre>