jquery - 响应裁剪图像，保持图像中心可见（水平）

Question

这是我需要帮助的网站： www.aaronrhoades.com/blog 标题图像在较大的浏览器上（例如在电视屏幕上）时会增大，而在较小的浏览器上时会缩小。但是，它会在某个点停止收缩，因为我不希望它变得太小。

问题：一旦图像停止收缩，它就会基于图像的左侧水平地粘在一个点上。我希望它向左移动，以便徽标保持可见。类似于“margin-left:-50%;”的东西 适用于移动设备，但显然这会在全屏上搞砸。

如果可能，只有 CSS 会很棒，否则我可以使用 jquery。PHP 可能很好，因为这是一个 wordpress，我只是不太熟悉它。这是我的代码：

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

和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;
    }
}

使用 CSS 媒体查询