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

Question

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

图片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

实现此目的

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>

Answer 2

既然您说允许在页眉和页脚之间放置 div，那么获得最大图像的最简单方法是：

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

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

Answer 3

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

*{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%;
}

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

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

how to figure image size to fit below header and above footer

html

javascript

css

resize

image