javascript - 如何计算图像大小以适合页眉下方和页脚上方

Question

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

图片的ID是#nMapImg。

我有这些值(value)观:

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 实现这个

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

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