Не могу получить фото, чтобы быть отзывчивым

Question

Итак, я пытаюсь сделать так, чтобы эта отзывчивая фотография соответствовала ширине контейнера (который он есть) и высоте браузера / области просмотра (которой это не является).Но я никогда не могу понять, правильно ли CSS.Iv приложил фото, чтобы помочь ребятам увидеть проблему.Это также можно посмотреть на Zoeaa.com

На основании моего кода ниже, что мне нужно сделать, чтобы добиться этого?

.containerz section {
color: #000000;
padding: 30px 0;  
width: 100%;
height: auto;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("https://zoeaa.com/public/admin/social-network- 
lol.jpg");
background-size: cover;
}
.dividerz {
padding:0;
margin:0;
}
.dividerz h1 {
margin: 10%;
text-align:center;
font-size:48px;
color: #fff;
}

html{
padding: 1rem;
} 

}
p{
color: #fff;
line-height: 1.5;
font-size: 20px;
}
@media only screen and (max-width: 700px){
.dividerz h1{
font-size: 20px;
}
p{
font-size: 14px;
}
}

.btn {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
link: color: red;
border-radius: 5px;
text-align: center;
}

a:link {
color: white;
}

.btn:hover {
background-color: black;
}
</style>

<div class="containerz">
<section class="wrapperz">
    <div class="dividerz">
        <div class="bg"></div>
        <h1>We help you connect with new people!</h1>
        <a href="about.zoeea.com" class="btn" role="button">What is Zoeaa? 
 </a>
    </div>
 </section>
 </div>

Answer 1

См. Пример кода ниже; документация в комментариях :

О единицах просмотра вы можете прочитать здесь

.containerz section {
color: #000000;
padding: 30px 0;  
width: 100%;
height: auto;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("https://zoeaa.com/public/admin/social-network-lol.jpg");
background-size: cover;
}
.dividerz {
padding:0;
margin:0;
}
.dividerz h1 {
margin: 10%;
text-align:center;
font-size:48px;
color: #fff;
}

html{
padding: 1rem;
} 

}
p{
color: #fff;
line-height: 1.5;
font-size: 20px;
}
@media only screen and (max-width: 700px){
.dividerz h1{
font-size: 20px;
}
p{
font-size: 14px;
}
}

.btn {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
link: color: red;
border-radius: 5px;
text-align: center;
}

a:link {
color: white;
}

.btn:hover {
background-color: black;
}

/* Solution code */

body {
  margin: 0;
}

html {
  padding: 0; /* Remove the padding so that the .containerz element can touch edge of viewport*/
}

.containerz section {
  box-sizing: border-box; /* Since you have padding set make sure that it taken away from the dimensions of the section element*/
  height: 100vh; /* Set the element to 100 viewport height units so it takes up the viewport height*/
}

<div class="containerz">
<section class="wrapperz">
    <div class="dividerz">
        <div class="bg"></div>
        <h1>We help you connect with new people!</h1>
        <a href="about.zoeea.com" class="btn" role="button">What is Zoeaa? 
 </a>
    </div>
 </section>
 </div>

Answer 2

Привет, вы можете проверить этот код, я отредактировал, и он работал нормально для меня, и это мой скриншот: http://prntscr.com/l5465t

CSS

<style>
.containerz section {
color: #000000;
padding: 30px 0;  
width: 100%;
height: auto;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("https://zoeaa.com/public/admin/social-network-lol.jpg");
background-size: cover;
}
.dividerz {
padding:0;
margin:0;
}
.dividerz h1 {
margin: 10%;
text-align:center;
font-size:48px;
color: #fff;
}

body{padding: 0;margin: 0;}
html{
padding:0;
} 

}
p{
color: #fff;
line-height: 1.5;
font-size: 20px;
}
@media only screen and (max-width: 700px){
.dividerz h1{
font-size: 20px;
}
p{
font-size: 14px;
}
}

.btn {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
link: color: red;
border-radius: 5px;
text-align: center;
}

a:link {
color: white;
}

.btn:hover {
background-color: black;
}
</style>