Question

我正在设计一个响应式网站，当用户使用较小的屏幕分辨率时，我希望我的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推向左边，现在我的navmenu也被推到了左边。单击折叠按钮后，菜单无法显示。

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

navmenu被推向左边

1 个答案: