如何使图像始终有填充顶部50％

Question

我有一个中心图像加载填充顶部50％;但是，当我垂直调整窗口时，背景图像会压缩，但图像不会停留在中心。即使我将高度固定为原来的一半，然后加载它（所以我没有弯曲窗口），背景图像与视口成比例，但中心图像现在位于窗口的底部（它将是视口高度达到最大值。

我正在使用sass，目前我有：

  &--some-wrapper {
    [stuff...]
    position: relative;
    padding-top: 50%;

    @include MQ(S) {
      padding-top: 50%;
      padding-bottom: 125px;
    }
  }

但它没有按预期工作。

我该如何解决这个问题？

Answer 1

使用Flex-box技术使图像垂直居中并且放大水平。 SASS造型：

some-wrapper{
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
img { height: 60px; width: 60px }
}

或者您也可以使用CSS显示表格单元技术来居中图像。

Answer 2

50％真的吗？填充不能以％作为宽度 padding是网站的填充而不是它的内部

othewise

img{
  padding-top:50%;
}