html - 仅当宽度尺寸开始接触 Logo 时，背景尺寸才包含 Logo 图像

Question

当调整页面的宽度大小时，我只想在 Logo 两边没有剩余空间时开始包含 Logo ，以便在那时调整到页面的宽度。一定很简单!在 fiddle 示例中，它似乎像我想要的那样行事，但没有使用我自己的代码，它始终包含背景大小( Logo )。

我想要一个尺寸的标志中心页面，当页面宽度到达标志的两端时调整尺寸。希望你能听懂我的英语。

这里是:fiddle

#logo {
display: block;
background: url("http://cdn4.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png");
background-repeat: no-repeat;
background-position: center center;
background-color: white;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
height: 30%;
top: 0;
left: 0;
margin: 0 auto;
padding: 0;
-index: -100;

谁能帮我解决这个问题？

Answer 1

我通过在样式标签中使用 css 创建单个 html 文件来检查代码，它不适用于 IE，但适用于 Chrome 和 FF。!