Question

我正忙着使用Twitter Bootstrap创建一个定制的轮播。要查看到目前为止我所看到的内容，请参阅此jsfiddle。

我的问题是它首次加载时，转盘下面的数据，div是空的，然后数据被推送到＃34;第一张照片加载后立即关闭这非常难看。

我没有明确地想为我的轮播指定高度，因为我希望它在不同的设备上调整大小。

我是否应该为不同的媒体类型使用显式尺寸？

@media(max-width:767px){
  #carousel {
    height:100px;
  }
}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){
  #carousel {
    height:380px;
  }
}

我不确定如何使用媒体查询工作。

Answer 1

如果您知道轮播的纵横比，可以使用“填充底部”黑客来保持轮播的大小不变，而不指定高度以保持响应：

#carousel {
    position: relative;
    padding-bottom: 56.2%; // 16:9 for example
    height: 0;
}
#carousel > div {
    position: absolute;
    top: 0;
}

Google发现了很多“响应式嵌入”和“填充底层黑客”。最初用于响应式视频嵌入。

Answer 2

你很亲密，这是

@media screen and (max-width:767px){
  #carousel {
    height:100px;
  }
}

@media screen and (min-width:768px and max-width:992px){

}

@media screen and (min-width:993px and max-width:1191px){

}

@media screen and (min-width:1200px){
    #carousel {
        height:380px;
      }
}

然后在媒体查询中添加规则

在加载图片之前显示空白区域

2 个答案: