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

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

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.
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 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 -->