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

Question

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

我使用的是青菜，目前我有：。

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

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

但预期它不工作

我该如何解决这个问题？

Answer 1

使用柔性盒技术使图像垂直居中水平放置。 SASS造型：

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

或者你可以使用CSS显示表-cell技术也居中图像。

Answer 2

50％真的吗？填充在不工作的％作为宽度 填充是网站的填充不是其内部

othewise

img{ 
    padding-top:50%; 
}