问题描述
我正在尝试创建一个全屏滚动页面,您可以在其中从一个容器滚动到另一个容器。 容器 div (class="block") 有一个以图像和文本为内容的内容 div (class="blockcontent")。
我的目标是将全屏 div 内的内容垂直和水平居中。
我的问题:图像缩放得比父 div 大,或者图像链接被缩放得比图像本身大。我也不能让它垂直居中...
HTML
<div class="block">
<div class="blockcontent">
<div class="imgcontainer">
<a href="#"><img src="" alt=""></a>
<p>description</p>
</div>
</div>
</div>
<div class="block">
<div class="blockcontent">
<div class="imgcontainer">
<a href="#"><img src="" alt=""></a>
<p>description</p>
</div>
</div>
</div>
CSS
.block {
height: 100vh;
position: relative;
width: 100%;
}
.blockcontent {
max-width: 50%;
height: 100%;
margin: auto;
}
.imgcontainer {
height: 80%;
}
.imgcontainer img {
max-width: 100%;
max-height: 100%;
display: block;
}
解决方法
听起来你只是在寻找这样的东西?由于您使用的是 vh
vw
大小,因此以全屏方式查看。
section {
display: block;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
figure {
margin: 0;
}
section:nth-child(1) {
background-color: green;
}
section:nth-child(2) {
background-color: blue;
}
section:nth-child(3) {
background-color: red;
}
<section>
<figure>
<img src="https://picsum.photos/200" alt="">
</figure>
</section>
<section>
<figure>
<img src="https://picsum.photos/200" alt="">
</figure>
</section>
<section>
<figure>
<img src="https://picsum.photos/200" alt="">
</figure>
</section>