Как сделать изображение всегда имеет padding-top 50%

Question

У меня есть изображение центра, которое загружается с заполнением 50%; однако, когда я настраиваю окно по вертикали, фоновое изображение сжимается, но изображение не остается в центре. Даже я фиксирую высоту наполовину того, что она есть, а затем загружаю ее (поэтому я не сгибаю окно), фоновое изображение пропорционально окну просмотра, но центральное изображение теперь находится в нижней части окна (где это будет высота окна просмотра была на максимуме

Я использую дерзость и в настоящее время у меня есть:..

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

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

Но это не работает, как ожидалось

Как это исправить ?

Answer 1

Использовать технику Flex-box для фокусировки изображения по вертикали & горизонтально. SASS Styling:

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%; 
}