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

【问题标题】：Centre resizing image between fixed header/footer在固定页眉/页脚之间居中调整图像大小
【发布时间】：2014-07-08 22:46:34
【问题描述】：

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

当前工作示例：http://john-marshall.net

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>

【问题讨论】：

你所有的元素都在位置：固定，这不是要走的路
stackoverflow.com/questions/396145/…的可能重复

标签： html css

【解决方案1】：

CSS：

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

试试这个并在#gallerywrap.中检查您的保证金

【讨论】：

【解决方案2】：

对您的 css 进行以下更改：

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

这是你想要的效果吗？

【讨论】：

虽然图像居中，但它仍然位于页脚下方，并且当缩小右边距时不起作用。