在全屏容器中响应中心 img

如何解决在全屏容器中响应中心 img

我正在尝试创建一个全屏滚动页面，您可以在其中从一个容器滚动到另一个容器。 容器 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>