如何使图像始终具有 50% 的 padding-top答案

【问题标题】：How to make image always have padding-top 50%如何使图像始终具有 50% 的 padding-top
【发布时间】：2017-05-05 05:10:41
【问题描述】：

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

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

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

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

但它并没有按预期工作。

我该如何解决这个问题？

【问题讨论】：

标签： css responsive-design sass media-queries

【解决方案1】：

使用 Flex-box 技术将图像垂直和水平居中。 SASS 样式：

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

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

【讨论】：

【解决方案2】：

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

否则

img{
  padding-top:50%;
}

【讨论】：