Html 动态调整绝对定位文本的大小

*{
框大小：边框框；
保证金：0；
填充：0；
}
#头{
位置：相对位置；
宽度：100%；
最大高度：160像素；
最小宽度：320px；
}
img{
宽度：100%；
最大高度：160像素；
}
h1{
位置：绝对位置；
底部：-24px；
字号：6em；
}

马格罗周界

您是否使用底部0进行测试

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#head {
  position: relative;
  width: 100%;
  max-height: 160px;
  min-width: 320px;
}

img {
  width: 100%;
  max-height: 160px;
}

h1 {
  position: absolute;
  bottom: 0;
  font-size: 6em;
}

<header id="head">
  <img src="http://via.placeholder.com/1280x160" alt="header image"/>
  <h1> Magro Perimeter</h1>
  </header>

*{
框大小：边框框；
保证金：0；
填充：0；
}
#头{
位置：相对位置；
宽度：100%；
最大高度：160像素；
最小宽度：320px；
}
img{
宽度：100%；
最大高度：160像素；
}
h1{
位置：绝对位置；
底部：0；
字号：6em；
}
马格罗周界

Reddit上一位非常有用的用户解决了这个问题

h1 {
  position: absolute;
  top: 52%;
  font-size: 6vw;
}

---

我不太清楚为什么会这样。使用

top

而不是

bottom

似乎违反直觉

是的。由于我希望

的大小，我需要将

底部

调整为负数，以使文本位于

#头部

的底部。