使用background-size属性的值100% auto来实现你正在寻找的。

例如：

#first .smashinglogo{
   background-size:100% auto;
}

希望这能帮上忙。

***PS：*按照您上面的代码，可以去掉fixed，加上100% auto，即可实现输出。

尝试添加background-size:cover

.smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;
  background-size: cover;
  height:600px
}

查看this tutorial了解详细文章。

试试这个：

background-size:100% auto;

或

background-size: cover;

代替固定用途
max-width：100%;
这个会有用的。
最终输出

.smashinglogo {
  background: url(../images/logo1.png)  50% 100px no-repeat;
  max-width: 100%;
}

#first .smashinglogo{
 background-image: url(../images/logo1.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: 50% 50%;
}

试试这个，可能对你有用。

制作一个响应式的形象有很多方法。
基本规则是使用%值而不是pixel值。其次是使用@media queries来定位移动的设备和平板电脑。
你也可以使用CSS3的新技术来使图像响应：

.img-element: {url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

你可以阅读更多关于响应图像通过点击这个链接. http://css-tricks.com/which-responsive-images-solution-should-you-use/

我只是总结了一个答案，帮助我沿着同样的路线。

.smashinglogo {
  max-width: 100%;
background-size:100% auto;
}

.smashinglogo {
  max-width: 100%;
background-size:cover;
}

上面的两个代码都运行得很好。

如果你div background-image在小设备上堆叠时消失（通常宽度低于577 px），然后添加“min-height：310 px;”到你的CSS。

对我有用的是在CSS中使用min操作符：

.smashinglogo {
    width: min(80vw, 800px);
    height: min(20vw, 200px);
    display: block;
    position: relative;
    background: url(image.png) center;
    background-repeat: no-repeat;
    background-size: min(80vw, 800px), min(20vw, 200px);
}

在这种情况下，我的图像的大小为800px × 200px，我希望它能够响应地缩放（在本例中为整个浏览器窗口宽度的80%），但不大于原始大小。
如果想要有一个背景图像大小的下限，这同样适用于max运算符。