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>

在上面的笔中，我有一个div，其中同时包含一个<img>和一个<h1>。我希望将<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似乎违反直觉。

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

2 个答案: