html - 在 Bootstrap 中使轮播图像适合移动设备

Question

我为 mates brewery 创建了一个基本网站，但在移动设备上查看时，轮播图像被压缩并且无法根据屏幕大小进行调整。我尝试编辑 CSS 文件，这反过来有助于在 PC 上调整图像大小时调整图像，但对移动设备没有帮助。

网站暂时坐在这里http://west.net16.net/

提前致谢

/* Carousel base class */
.carousel {
  height: 100%;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

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>
 <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="IMGS/header1.gif" alt="west city brewing">
     <div class="container">
        <!--<div class="carousel-caption">
          <h1>Example headline.</h1>
          <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not     load/display properly due to web browser security rules.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up     today</a></p>
        </div>-->
      </div>
    </div>

Answer 1

您的轮播没有循环元素。它只是一个静态图像。

如果您需要静态图像 - 请尝试使用超大屏幕。它的大小非常适合移动和桌面设备。

如果您需要使用轮播，我建议使用背景图片修改经典轮播 html 脚本，并相应地调整您的 css 文件中的大小。

在这里你会找到一个html例子:

<div class="container">
    <!-- Header Carousel -->
  <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" role="listbox">
             <div class="item active">
                <div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
                <div class="carousel-caption">

                </div>
            </div>
            <div class="item">
                  <div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
                <div class="carousel-caption">

                </div>
            </div>
            <div class="item">
                  <div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
                <div class="carousel-caption">

                </div>
            </div>

        </div>

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

</div>

和您的 CSS 示例代码:

/* CSS used here will be applied after bootstrap.css */
/* -------carousel slides----*/
 .carousel-control.right, .carousel-control.left {
      background-image: none;  
  }        
.carousel-indicators {
  bottom:-50px;
}
.carousel-indicators li {
   border-color: #C0C0C0;
}
.carousel-indicators .active {
  background-color: #c0c0c0;
}
.carousel-inner {
   margin-bottom:50px;
}
.carousel .item{
    height: 400px;
}
.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 400px;
}
.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

bootply here

如果需要，您可以移除轮播指示器及其控件。