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，因为你这么说

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

.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>