如何使div背景图像响应答案

【问题标题】：how to make div background image responsive如何使div背景图像响应
【发布时间】：2017-12-20 16:13:12
【问题描述】：

如何使此图像具有响应性

HTML：

<section id="first" class="story" data-speed="8" data-type="background">
    <div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
</section>

CSS：

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

例如，

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

希望这会有所帮助。

PS：根据您上面的代码，您可以删除fixed并添加100% auto以实现输出。

【讨论】：

对于这个答案图像显然使用了 100% 的区域（太大）。顺便说一句，感谢您尝试
这将使您的图像相应地响应拉伸。如果您发现 100% 太大，请设置一个适合您需要的百分比值。然后拉伸它并再次检查输出。如果还是不行，使用background-size:100% auto; - @Phoenix
如何使 DIV 与背景图像高度相同？

【解决方案2】：

尝试添加background-size:cover

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

查看this tutorial了解详细文章。

【讨论】：

背景图片消失了。
“本教程”页面不存在了。

【解决方案3】：

试试这个：

background-size:100% auto;

或

background-size: cover;

【讨论】：

【解决方案4】：

代替固定使用

最大宽度：100%；

这会起作用。

最终输出

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

制作响应式图片有很多方法。

基本规则是使用% 值而不是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/

【讨论】：

【解决方案7】：

我只是总结了一个对我有同样帮助的答案。

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

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

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

【讨论】：

【解决方案8】：

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

【讨论】：