html - 导航菜单被推到左边

Question

这是 fiddle http://fiddle.jshell.net/tymvH/2/

我正在设计一个响应式网站，当用户使用较小的屏幕分辨率时，我希望我的 img 居中。所以我将 css 编码如下

img.bg {
            min-height: 100%;
            min-width: 1024px;
            width: 100%;
            height: auto;
            position: fixed;            
            top: 0;
            left: 0;
        }
        @media screen and (max-width: 1024px) {
            img.bg {
                left: 50%;
                margin-left: -512px;
            }        
        }

但是因为我将 img 推到了左边，现在我的导航菜单也被推到了左边。单击折叠按钮后菜单无法显示。

<div class="navbar navbar-default navbar-fixed-bottom">      
         <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
    </div>

<div class="navmenu navmenu-default navmenu-fixed-left">
        <a class="navmenu-brand" href="#">Project name</a>
        <ul class="nav navmenu-nav">
            <li class="active"><a href="1.aspx">option 1</a></li>
            <li><a href="2.as[x">Option 2</a></li>
            <li><a href="3.aspx">Option 3</a></li>
        </ul>        
    </div>

Answer 1

放弃媒体查询，使用带背景的 div 而不是图像，删除固定的最小宽度，设置

background-size:cover;
background-position:center center;

查看工作 JSFiddle

要从 PHP 插入图像，只需将背景标签移动到 div 样式定义中:

<div style="background-image:url('<?=$imageurl?>');"></div>