Масштабный отзывчивый логотип и коэффициент сохранения

Question

У меня есть этот логотип, который я пытаюсь использовать на быстро реагирующем сайте, но я не могу понять, как его получить, чтобы он заполнял всю ширину его родительского элемента при сохранении его соотношение по высоте.

Когда вы начинаете изменять размер окна браузера, логотип становится меньше по ширине, но его высота не масштабируется должным образом. Есть ли способ сохранить это.

Вот мой CSS для элемента логотипа:

h1 { 
    width: 100%; 
      height: auto; 
    background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange; 
    background-size: contain; 
    text-indent: -999999px; 
    text-align: center; 
    margin-top: 270px; 
} 

Это проблема у меня. Посмотрите на все это дополнительное пространство ниже логотипа .

А вот CodePen с примером моего вопроса:

http://codepen.io/realph/pen/LAFsi

Любая помощь с этим ценится. Заранее спасибо!

Answer 1

Вы можете использовать обивка трюк (см CSS-square container), чтобы делать то, что вы хотите с одним изображением

h1 { 
    background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange; 
    background-size: contain; 
    text-indent: -999999px; 
    text-align: center; 
    position:relative; 
    width:100%; 
    height: 0; 
    padding-bottom: 30%; 
    display:block; 
} 

Demo