jquery - 如何使CSS轮廓匹配动态元素高度

Question

我在这个页面的标题中有一个大纲:https://despeaux.consulting/larryhooke/landing/

我使用媒体查询通过 vw 更改标题文本大小，但我无法弄清楚如何使插图轮廓匹配以舒适地适应。

执行此操作的最佳方法是什么，这样我就不必进行大量媒体查询？谢谢。

Answer 1

您确实需要简化事情。你有比你需要的更多的元素。您设置了很多高度(似乎不需要)和一些无关紧要的样式属性。最终，这一切都对你不利，而不是对你有帮助。

以下是您可以执行的操作的简化演示。最终它是一个 block 级元素，具有规则的边距、边框和一些内部文本填充。它根据内容的大小调整大小。通过媒体查询根据需要调整字体大小。

body {
  margin: 0;
  background-color: indianred;
}

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.brand {
  display: block;
  margin: 3vw;
  padding: 2rem;
  color: white;
  font-size: 4vw;
  text-align: center;
  text-decoration: none;
  border: 1px solid white;
}

.brand h1,
.brand h2 {
  margin: 0;
}

.brand h2 {
  font-size: 2vw;
}

.hero {
  height: 100vh;
  background-image: url( 'http://placehold.it/1600x1600/fc0' );
  background-repeat: no-repeat;
  background-size: cover;
}
.hero img {
  display: block;
  height: inherit;
  max-width: 100%;
}

<header>

  <a class="brand" href="#">
    <h1>Heading</h1>
    <h2>Sub Heading</h2>
  </a>
  
</header>
<main>
  
  <div class="hero"></div>
  
  <div>
  
    <p>
      Lorem ipsum dolor.
    </p>
  
    <p>
      Lorem ipsum dolor.
    </p>
  
    <p>
      Lorem ipsum dolor.
    </p>
  
    <p>
      Lorem ipsum dolor.
    </p>
    
  </div>
  
</main>