在CSS中完美固定背景横幅

Question

我的页面上有一个横幅，其中包含以下设置：

width: 100%;
height: 100px;
background: url(...) no-repeat center center fixed;

但我使用锁定的背景宽高比和响应宽度和背景高度的组合进行战斗。

当我具有锁定的背景宽高比（删除背景大小100 100）时，当窗口大小超过图像大小时，每侧都有空格。

当我有background-size: 100% 100%;时，宽高比未锁定。

当我有background-size: 100%;时，宽高比会被锁定，宽度为100％，但顶部和底部都有空格。

我问你，如果你能告诉我一个锁定纵横比的组合并且没有空格。我创建了一个 JSFiddle ，其中我有每个例子：https://jsfiddle.net/30ycgsg0/

我很感谢每一个回复，祝你有愉快的一天！

Answer 1

使用$ip = gethostbyname('www.google.com'); echo "GOOGLE IP = " . $ip; // it shows IP only via php-cli, not thru apache 。

由于元素的宽高比可能与图像的宽高比不同，并且您不会留空空格，因此图像有时会被截断。

Answer 2

尝试：

{{1}}

Answer 3

尝试从正文中删除边距尝试使用此示例

    body{
        margin: 0px;
    }