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

Question

首先，我正在尝试使用 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>

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

Answer 1

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

横向图片和高度为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>