Question

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

问题：一旦图像停止收缩，它就会根据图像的左侧水平粘在一个点上。我希望它向左移动，以便徽标保持可见。类似于“保证金左边：-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媒体查询

裁剪图像，保持图像中心可见（水平）

1 个答案: