我的 div 背景图像对移动设备没有响应？如何使其适用于所有移动设备答案

【问题标题】：my div backround image is not responsive for mobile devices?how to make it work for all mobile devices我的 div 背景图像对移动设备没有响应？如何使其适用于所有移动设备
【发布时间】：2018-09-17 04:59:37
【问题描述】：

这是我的适用于桌面的 CSS 类

.banner-img{
background-position: 100%;
    background-image: url(http://d14a6hhmw70jfk.cloudfront.net/spartans11/images/matches_banner.png?v=1523084431);
    background-size: cover;
}

【问题讨论】：

你可以使用引导程序来实现这一点。或者使用 css 媒体查询
查看我发布的小代码 sn-p。调整浏览器大小或在移动设备和桌面上运行以查看效果。

标签： html css image responsive-design responsive

【解决方案1】：

<style>

.banner-img{
    background-position: 100%;
    background-image: (http://d14a6hhmw70jfk.cloudfront.net/spartans11/images/matches_banner.png?v=1523084431);
    background-size: cover;

}
@media (max-width: 750px){
   .banner-img{
       background-size: contain;
   }

}



</style>
<body>

<h1>Background Image Resize on mobile</h1>
<p>Resize the browser and see the effect</p>

<div class="banner-img" style="padding: 400px; color: #fff; font-size: 45px">
<strong>testing background</strong>
</div>
</body>

【讨论】：