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

【问题标题】：How to use padding-bottom for background image without distorting image如何在不扭曲图像的情况下使用 padding-bottom 作为背景图像
【发布时间】：2013-05-26 00:44:40
【问题描述】：

好的，这是我的代码：

#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？

提前谢谢你！

【问题讨论】：

在网站上看起来不错。更大，但质量是一样的。或者你不想让它变大？
对，看起来不错，但不是正确的分辨率。它比实际图像有点模糊。我需要让它看起来晶莹剔透..
因为你使用了 background-size: cover; 它比较模糊。因此它会调整大小以适合父元素，并且会丢失图像某些部分的像素颜色信息。您可以使用图形编辑工具来完全适合您需要的大小，前提是您对包含此背景的元素具有固定大小..您可以创建一个 jsfiddle 吗？
是的，放大总是扭曲。如果你想让它保持清晰的分辨率，你想从大到小，从小到大。

标签： css image wordpress

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：