Javascript 使图像在所有设备上都具有响应性

我的网页中有一个旋转木马，我试图让它在所有设备上都能响应

我对3个不同设备的css声明，因此相应地将高度定义为350px、255px、125px

.banner{
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
    min-height:350px;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
}
.banner{
    min-height:255px;
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
}
.banner{
    min-height:125px;
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
    }

我的html代码：

<div class="banner">                    </div>

---

请告知如何使我的图像适合所有设备。提前感谢。

您创建CSS的方式是按照您列出的最后一条规则进行级联，因此您的最小高度始终为125px。您需要将规则拆分为媒体查询<代码>@media（最小宽度：320px）{ .横幅{ 最小高度：125px}

---

这样，当视口大小更改时，规则将应用于您提供的媒体“断点”

宽度：当您在较宽的屏幕上观看时，100%会将其打断

以下是Bootstrap的img响应

max-width: 100%; 
display:block; 
height: auto;

这是编写媒体查询的方式

@media (min-width: 480px) { //for mobile devices 
  .banner {
    min-height: 125px
   }
}

@media (min-width: 768px) { // for tablets
  .banner {
    min-height: 255px
   }
}

---

您不使用@media querys的任何特定原因可能存在重复？我会为每种媒体类型使用不同的图像，这样您的浏览器就不必进行矢量缩放。这就是规则。