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

【问题标题】：Make image responsive across all devices使图像在所有设备上都具有响应性
【发布时间】：2016-02-14 14:30:44
【问题描述】：

我的网页中有一个轮播，我试图让它在所有设备上都能响应。

我对 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>

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

【问题讨论】：

Make an image responsive - simplest way的可能重复
您没有使用@media 查询的任何具体原因？
我会为每种媒体类型使用不同的图像，因此您的浏览器不必进行矢量缩放。那和@media 规则。

标签： javascript php html css

【解决方案1】：

您创建 CSS 的方式是级联到您列出的最后一条规则，因此您将始终获得 125 像素的最小高度。您需要将规则拆分为媒体查询。 @media (min-width: 320px) { .banner { min-height: 125px}} 这样，当您的视口大小发生变化时，规则将应用于您提供的媒体“断点”。

【讨论】：

【解决方案2】：

宽度：当您在更宽的范围内查看时，100% 会破坏它。

以下是Bootstrap的img-responsive

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
   }
}

【讨论】：