Bootstrap Carousel 在移动设备上缩小图像

如何解决Bootstrap Carousel 在移动设备上缩小图像

首先，我正在尝试使用 Jekyll 构建一个网站。我对 HTML、CSS 等一无所知。我只是使用我在网上找到的模板。

我的主页上有一个旋转木马，我在其中加载了不同大小的不同图像。当我在笔记本电脑上查看网站时，图像看起来很完美。但是当我在手机上查看网站时，图像的宽度发生了变化，改变了纵横比，从而使图像看起来很糟糕。我知道错误出在轮播的代码中（我已经明确提到图像的高度为 400p 并将宽度设置为自动。轮播固定高度背后的意图是防止轮播下方的文本加载不同的轮播图片时，继续上下移动。

有人可以帮我根据视口动态改变轮播图像的高度吗。

轮播的 HTML 和 SCSS 是

/* Carusel */

.carousel {
    border-radius: 3px 3px 3px 3px;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
}

/* 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 {
  min-width: 100%;
  background-color: #fff;
}

.carousel-inner > .item > img {
  width: 100%;
  height: 100%;
}

<div markdown="0" id="carousel" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover" data-touch="true" >
    <!-- Menu -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
        <li data-target="#carousel" data-slide-to="4"></li>
        <li data-target="#carousel" data-slide-to="5"></li>
        <li data-target="#carousel" data-slide-to="6"></li>
    </ol>
    <!-- Items -->
    <div class="carousel-inner" markdown="0">
        <div class="item">
            <img src="{{ site.url }}{{ site.baseurl }}/images/slider7001400/1.jpg" class="img-responsive" style="width:auto; height: 400px; margin: auto" alt="Slide 1" />
        </div>
        <div class="item ">
            <img src="{{ site.url }}{{ site.baseurl }}/images/slider7001400/2.jpg" class="img-responsive" style="width:auto; height: 400px; margin: auto" alt="Slide 2" />
        </div>
        <div class="item">
            <img src="{{ site.url }}{{ site.baseurl }}/images/slider7001400/3.jpg" class="img-responsive" style="width:auto; height: 400px; margin: auto" alt="Slide 3" />
        </div>
        <div class="item active">
            <img src="{{ site.url }}{{ site.baseurl }}/images/slider7001400/4.jpg" class="img-responsive" style="width:auto; height: 400px; margin: auto" alt="Slide 4" />
        </div>
        <div class="item">
            <img src="{{ site.url }}{{ site.baseurl }}/images/slider7001400/5.jpg" class="img-responsive" style="width:auto; height: 400px; margin: auto" alt="Slide 5" />
        </div>
        <div class="item">
            <img src="{{ site.url }}{{ site.baseurl }}/images/slider7001400/6.jpg" class="img-responsive" style="width:auto; height: 400px; margin: auto" alt="Slide 6" />
        </div>
         <div class="item">
            <img src="{{ site.url }}{{ site.baseurl }}/images/slider7001400/7.jpg" class="img-responsive" style="width:auto; height: 400px; margin: auto" alt="Slide 7" />
        </div>
    </div>
  <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">PrevIoUs</span>
  </a>
  <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

我尝试了这里提到的一些解决方案，但它们似乎不起作用。希望这个帖子里有人能解决这个问题

解决方法

你的照片是纵向还是横向？

横向图片和高度为 400px 的问题是，轮播限制图片的宽度不能超过屏幕。

因此，例如，您有 2000px 宽和 800px 高的图像 - 您想要的是 1000px * 400px。由于您的屏幕不是 1000px 宽，因此宽度设置为您的移动设备可以显示的任何值，而高度仍然是 400px，因为您是这么说的。

[编辑] scss 的最后四行也格式化了图像。为了使您的代码更简单，您应该删除单个图像上的 style="width:auto; height: 400px; margin: auto" 并按如下方式编辑您的 scss：

.carousel-inner > .item > img {
  max-height: 400px;
  width:100%;
}

我们不需要 margin: auto 和 width:auto，因为它们什么都不做（至少当我尝试重新创建您的项目时）。

如果您不希望轮播后的内容在具有不同大小的图像时上下跳动，则应在整个轮播周围添加另一个容器并为其指定高度 400px

<div style="height:400px;">
 <div markdown="0" id="carousel" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover" data-touch="true" >
  [...]
 </div>
</div>