Question

我无法在移动设备和桌面屏幕上以不同方式制作自举式旋转木马。

这是我的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%。

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

感谢帮助

Answer 1

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

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

Answer 2

实际上有一个名为Skidder的jQuery滑块插件。没有与默认bootstrap轮播相同的设计但是相当不错。 .img-responsive不会这样做。

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

在不同设备上以不同方式制作bootstrap轮播

2 个答案: