Wie mache ich ein Bild immer padding-top 50%

Question

Ich habe ein Bild in der Mitte, das mit einem Füllgrad von 50% geladen wird; Wenn ich jedoch das Fenster vertikal verstelle, wird das Hintergrundbild komprimiert, aber das Bild bleibt nicht in der Mitte. Selbst wenn ich die Höhe auf die Hälfte fixiere, dann lade sie (also biege ich das Fenster nicht), das Hintergrundbild ist proportional zum Ansichtsfenster, aber das mittlere Bild befindet sich jetzt am unteren Rand des Fensters (wo es wäre die Darstellungshöhe an seinem Maximum war sein

ich sass bin mit und zur Zeit habe ich:..

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

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

Aber es wie erwartet funktioniert nicht

wie kann ich dieses Problem beheben ?

Answer 1

Verwenden Sie Flex-Box-Technik, um das Bild vertikal zu zentrieren & horizontal. SASS Styling:

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

Oder können Sie CSS-Display table-cell-Technik verwenden Bild zum Zentrum auch.

Answer 2

50% wirklich? padding Arbeit in% nicht als Breite Polsterung Polsterung der Website nicht, was sein Inneres

othewise

img{ 
    padding-top:50%; 
}