gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 10:03:34 26 4
gpt4 key购买 nike

  1. 如何在固定的页眉/页脚之间放置图片并防止重叠?
  2. 当窗口大于其最大宽度/高度时,如何使图像在页面上居中?

当前工作示例: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>

最佳答案

CSS:

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

试试这个并在 #gallerywrap. 中检查您的 margin 。

关于html - 在固定页眉/页脚之间居中调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24633611/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com