css - 响应式背景图片高度

Question

场景:

• 我有一个 Wordpress 网站，它有一个旧主题，不允许我更改标题图片。
• 作为在我想要不同图像的页面上的解决方法，我有使用 CSS 隐藏标题图片并将其替换为背景图像，它工作正常并且响应迅速。

待办事项:

• 但是我需要为该区域设置一个高度，以便为 bg 图像留出空间以全尺寸显示(我使用“padding-top”完成了这一点)
  • 每当窗口缩小，或在手机上。
• 有没有办法让图像下方的空间随着图像也坍塌而坍塌下来？

网址: http://www.annareynolds.org/lovehobart/

我的自定义 CSS:

.singular-page-691 #header img {
    display:none;
}
.singular-page-691 #branding {
padding-top:390px;
  background-image:url(http://www.annareynolds.org/wp-content/uploads/2018/08/love-hobart-crop.jpg);  
  background-repeat: no-repeat;
  background-size: 100%;
background-position:top left;
}

Answer 1

仅在 % 中使用填充

喜欢:

.singular-page-691 #branding {
padding-top: 40%;}

http://prntscr.com/kj6z3j