缩放响应徽标和保持比率

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