无法获取照片以响应
无法获取照片以响应
提问于 2018-10-12 11:38:15
因此，我尝试将这张响应式照片设置为容器的宽度(它是)和浏览器/视口的高度(它不是)。但是我似乎永远都不能得到正确的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>
回答 2
Stack Overflow用户
发布于 2018-10-12 11:59:46
嗨，你能检查一下这段代码吗，我已经编辑过了，它对我来说运行得很好，这是我的截图：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>Stack Overflow用户
发布于 2018-10-12 18:01:28
参见下面的代码示例；文档在注释中
您可以阅读有关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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52771894
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号