无法使照片具有响应性

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

嗨，您能检查一下这段代码吗，我已经对其进行了编辑，对我来说效果很好，这是我的屏幕截图：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>

Answer 2

请参见下面的代码示例； 文档在注释中：

您可以阅读有关viewport units here的信息

.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>