如何计算图像大小以适应页眉和页脚下方

Question

我想将图像置于页眉下方和页脚上方的可用空间中。 它需要响应，所以我希望图片尽可能大，但不要与页眉和页脚重叠。

图像的ID是#nMapImg。

我有这些价值观：

var dh=$(document).height();
var dw=$(document).width();
var hh=$("#header").height();
var fh=$("#footer").height();
var w=$("#nMapImg").width();
var availHeight=h-hh-fh;

我认为这只是数学计算我可以拥有的最大尺寸然后我将它居中。我只是无法绕过它。

Answer 1

使用flexbox，您可以使用纯css实现此目的

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}
html, body, .app {
  height: 100%;
}
header {
  background: red;
}
footer {
  background: blue;
}
footer, header {
  height: 400px; 
}

img {
  max-width: 100%;
  max-height: 100%;
}
.app {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="app">
  <header>header</header>
  <div class="content">
    <img src="http://placehold.it/500" alt="" />
  </div>
  <footer>footer</footer>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于您说允许在页眉和页脚之间放置div，因此最简单的方法是：

<div style="background-image: url('myimage.jpg'); background-size: contain"></div>

您还可以在需要时添加background-position: center center;

Answer 3

使用flexbox并在图像所在的div上设置高度

＆＃13;

＆＃13;

*{margin: 0;}
header{
  background: green;
  height: 100px;
}

footer{
  background: green;
  height: 100px;
}

.main{
  height: 1000px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main img{
  width: 100%;
}

＆＃13;

<header>
  <h1>HEADER</h1>
</header>
<div class="main">
<img src="https://placehold.it//900x500" alt="" />
</div>
<footer>
  <h1>FOOTER</h1>
</footer>

＆＃13;

＆＃13;

＆＃13;