如何在不向其内部元素添加填充的情况下使标题图像以全高显示？

Question

我制作的示例： JSFiddle

我希望标题上的背景图像始终是照片高度的100％。 我只是不确定如何在不为图像顶部的H2添加大量填充的情况下执行此操作。 我想我将要问的另一个问题是，无论使用什么设备，如何将背景图像全屏显示？

这是我正在尝试的。 任何帮助，将不胜感激。

.heading {
    background: url("http://www.lexcenter.com.br/site/wp-content/themes/dt-nimble/images/backgrounds/header/art-header-main/full/r_atr-header-main.jpg");
height: 100%;
/* background-size: cover; */
}

.heading h2 {
    padding: 50px;
    text-align: center;
    color: white;
}

Answer 1

为了制作标题背景图片，请尝试以下代码

.heading {
  background: url("http://www.lexcenter.com.br/site/wp-content/themes/dt-nimble/images/backgrounds/header/art-header-main/full/r_atr-header-main.jpg");
  background-size: container; /* background size will be equal to your content */
  background-position: 50%;
  background-repeat: no-repeat;
}

.heading h2 {
  padding: 50px;
  text-align: center;
  color: white;
  margin: 0; /* reset the default margin for header tags */
}

对于全屏背景图片，无论使用哪种设备，请尝试以下代码

* {    /* reset all the default margins and padding */
  padding: 0;
  margin: 0;
}

.background-bg {
  width: 100%
  height: 100vh; /* height will be equal to viewport.*/
  background-image: url("background-image.jpg");
  background-size: cover;
  background-position: 50%;
}

Answer 2

尝试将.heading的高度设为100vh；

.height{
  width: 100%;
  height: 100vh;
  background-image: url('http://www.lexcenter.com.br/site/wp-content/themes/dt-nimble/images/backgrounds/header/art-header-main/full/r_atr-header-main.jpg');
}

您也可以设置更多样式。 我认为这更像您的想法？

body{
  margin: 0;
  padding: 0;
 }

.height {
  width: 100%;
  height: 100vh;
  background-image: url('https://images.pexels.com/photos/949097/pexels-photo-949097.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}