crop an image responsively keeping the center of the image visible (horizontally)

Question

Here is the website I need help with: www.aaronrhoades.com/blog The header image grows when it's on a bigger browser (eg 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.

The problem: 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.

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:

 #nicelogo{
    overflow:hidden;
 }
 #nicelogo img{
    width: 100%;
    min-width: 683px;
    min-height: 250px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
 }

and the html:

<div id="header"> 
<div id="nicelogo">
<img src="http://www.aaronrhoades.com/images/web-header-home.jpg" width="1366" height="500">
</div>!-- end of #nicelogo -->
</div>!-- end of #header -->

Answer 1

@media (max-width: 683px) {
    #nicelogo img{
        margin-left: 50%;
        left: -341px;
        position: absolute;
    }
}

use css media query