イメージを常にパディングトップにする方法50％

Question

パディングトップが50％でロードされるセンターイメージがあります。しかし、ウィンドウを垂直に調整すると、背景画像は圧縮されますが、画像は中央には残りません。私は高さをそれの半分に固定してからそれをロードします（ウィンドウが撓んでいないので）、背景画像はビューポートに比例しますが、中央の画像はウィンドウの一番下にあります。それは、ビューポートの高さが最大にあっただろう

私はSASSを使用していて、現在私が持っている：。。

&--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表示テーブルセル技術を使用することができます。

Answer 2

本当に50％ですか？ パディング幅とパディングは、サイトのパディングがある％でいけない仕事ではないものをその内側

othewise

img{ 
    padding-top:50%; 
}