Question

如何在固定的页眉/页脚之间放置图像并防止重叠？
当窗口大于最大宽度/高度时，如何在页面上居中显示图像？

CSS

#content {
    position:relative;
}

#headerwrap {
    position:fixed;
    width: 100%;
    height:60;
    background-color:#fff;
    z-index:99;
}

#header {
    border-top: 1px solid #000;
    margin:20 20 0 20;
}

#title {
   font-size:15px;
   font-family: "Fugue-Regular";
   font-weight:100;
   padding-top:5px; 
}

#footerwrap {
   position:fixed;
   width: 100%;
   height:60;
   bottom:0;
   background-color:#fff;
   z-index:99;
}

#footer {
   border-bottom: 1px solid #000;
   height:40;
   margin:0 20 20 20;
}

/*gallery*/

#gallerywrap{
   position:fixed;
   margin:60 20 60 20;
   text-align: center;
}

#gallery{
   width:100%;
   height:auto;
}

.img {
   max-width: 100%;
   max-height: 100%;
}

HTML

<body>
<div id="content">

   <div id="headerwrap">
       <div id="header">

           <div id="title"><a href="#" class="menu">John Marshall</a></div>

           <div id="menuli">
                <ul>
                     <li><a href="#">Project 1</a></li>
                </ul>
           </div>

       </div>
   </div>

   <div id="gallerywrap">
       <div id="gallery">
             <img src="http://john-marshall.net/images/selected/cafe.jpg" class="img" alt="Cafe" />
       </div>
   </div>

  <div id="footerwrap">
       <div id="footer">

       </div>
  </div>

Answer 1

对您的css进行以下更改：

    #gallerywrap {
       position: fixed;
       margin: 60px 0px 60px 0px;
       text-align: center;
       width: 100%;
    }

这是你正在寻找的效果吗？

Answer 2

CSS：

#gallery{
   width:100%;
   height:auto;
   margin:0px auto;
}

试试这个并检查#gallerywrap.

中的边距

中心在固定页眉/页脚之间调整图像大小

2 个答案: