動態調整絕對定位的文本的大小

Question

https://codepen.io/afrodiameter/pen/OwQmyd

 * { 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: -24px; font-size: 6em; } 

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

在上面的Pen中，我有一個同時包含<img>和<h1>的div 。 我希望<h1>的底部被“鎖定”到<img>的底部。

當用戶調整瀏覽器的大小時，我希望font-size地縮放，同時<h1>的底部保持“鎖定”到<img>的底部。

我認為使用vw是可行的方法，但是在調整瀏覽器大小時， <h1>會垂直移動，因此不會保持鎖定在圖像底部。

我想在沒有JS / jQuery或mixins的情況下完成此任務。 這可能嗎？

Answer 1

您是否正在測試bottom：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>

Answer 2

Reddit上一個非常有用的用戶解決了這個問題。

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

為什么不能奏效，我不太確定。 使用top而不是bottom似乎違反直覺。