使引导轮播在不同设备上以不同方式显示答案

【问题标题】：Make bootstrap carousel display differently on different devices使引导轮播在不同设备上以不同方式显示
【发布时间】：2014-04-20 22:08:52
【问题描述】：

我无法让我的引导轮播在移动设备和桌面屏幕上以不同方式显示。

这是我的 HTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

   <div class="item active">
      <center><img src="img.jpg" alt="..."></center>
      <div class="carousel-caption">
       <p>1st Screen</p>
      </div>
    </div>
     <div class="item">
     <center> <img src="img2.jpg"  alt="..."></center>
      <div class="carousel-caption">
       <p>2nd Screen</p>
      </div>
    </div>
    <div class="item">
      <center><img src="img3.jpg" alt="..."></center>
      <div class="carousel-caption">
       <p>3rd Screen</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

您可以查看网站here

我遇到的问题是我的图像尺寸在移动设备上显示不同，我拥有的 3 张图像是：

img.jpg 尺寸 = 700 x 378 pixels

img2.jpg 尺寸 = 700 x 378 pixels

img3.jpg 尺寸 = 700 x 378 pixels

图像在桌面设备上显示良好，但在移动设备上，整个图像似乎放大了，并且一些图像离开了屏幕。

我想要一个媒体查询，它只在移动设备上生成所有图像width:100%。

或者是否有一种简单的方法可以在所有设备上保留图像的大小？

感谢帮助

【问题讨论】：

标签： html css twitter-bootstrap media-queries

【解决方案1】：

Bootstraps 有一个预定义的 CSS 类，称为“img-responsive”。这应该在移动设备上正确缩放您的图像。一个例子：

<img src="..." class="img-responsive" alt="Responsive image">

【讨论】：

【解决方案2】：

其实有一个jQuery滑块插件叫做Skidder。与默认引导轮播的设计不同，但非常好。 .img-responsive 不行。

编辑：在轮播的 CSS 中添加 height: 54vw;，它应该可以正常工作。（高度/宽度% = 54）

【讨论】：

试着举一个例子来说明这如何解决问题，而不仅仅是链接到外部网站。