css - 如何在不扭曲图像的情况下使用 padding-bottom 作为背景图像

Question

好吧，这是我的代码：

#header {
    background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-bottom: 15%;
}

它正确缩放，就像我想要的那样，但是如果您访问实际图像http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png您会发现它更多比它出现在网站上时更清晰。有不同的方法吗？有没有办法以完美的分辨率使用 padding-bottom？

先感谢您！

Answer 1

尝试将图像分辨率大小加倍

Answer 2

我所做的是使用两个背景图像，“标志”是固定的，我让背景图像水平重复，它就成功了。