在https://filathlos.imagewize.com/我有一个WordPress网站正在进行Bootstrap 4轮播。我正在努力让所有幻灯片的图像正确调整大小，以使旋转木马响应。
现在前两张幻灯片正在调整大小。调整大小时最后的幻灯片更大（当我使浏览器变小时）。除了carousel.scss，我现在有以下内容：
/* -------------------------------------------------
*
* Slider
*
* ------------------------------------------------*/
@media (min-width: 0px) and (max-width: 678px) {
.carousel {
max-height: 500px;
overflow: hidden;
}
}
.carousel {
max-height: 700px;
overflow: hidden;
}
.carousel-caption {
position: absolute;
top: 100px;
padding-right: 20px;
padding-left: 20px;
text-align: left;
margin-left: auto;
margin-right: auto;
/*max-width: 1120px;*/
}
.ct-div-block {
width: 55%;
float: left;
padding-right: 45px;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
width: 100%;
height: auto;
}
.carousel-indicators {
position: absolute;
bottom: 0;
right: 0;
left: 0;
width: 100%;
z-index: 15;
margin: 0;
padding: 0 25px 25px 0;
text-align: right;
}
这是html输出
<div class="container-fluid b4-slider">
<!-- Carousel -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class=""></li>
<li data-target="#carousel" data-slide-to="1" class="active"></li>
<li data-target="#carousel" data-slide-to="2" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img width="2000" height="1500" src="https://filathlos.imagewize.com/app/uploads/2017/03/curtis-mac-newton-running.jpg" class="img-responsive responsive--full wp-post-image" alt="" title="Feature image" srcset="https://filathlos.imagewize.com/app/uploads/2017/03/curtis-mac-newton-running.jpg 2000w, https://filathlos.imagewize.com/app/uploads/2017/03/curtis-mac-newton-running-300x225.jpg 300w, https://filathlos.imagewize.com/app/uploads/2017/03/curtis-mac-newton-running-768x576.jpg 768w, https://filathlos.imagewize.com/app/uploads/2017/03/curtis-mac-newton-running-1024x768.jpg 1024w" sizes="(max-width: 2000px) 100vw, 2000px"> <!-- Static Header -->
<div class="header-text carousel-caption hidden-xs">
<div class="ct-div-block">
<h2>
<span>Running is freedom</span>
</h2>
<br>
<h3>
<span><p><em>“Praesent At Dignissim Ex, A Ultricies Felis. Donec Sagittis Justo Imperdiet, Gravida Odio Id, Porttitor Urna. In Et Purus Nibh. Nunc Tempor Augue Eleifend Velit Eleifend Ornare.”</em><br>
– Brenda Schultz, Multicerv</p>
</span>
</h3>
</div>
</div><!-- /header-text -->
</div><!-- end item -->
<div class="carousel-item active">
<img width="2426" height="1728" src="https://filathlos.imagewize.com/app/uploads/2017/03/25.5-of-the-web.jpeg" class="img-responsive responsive--full wp-post-image" alt="" title="Feature image" srcset="https://filathlos.imagewize.com/app/uploads/2017/03/25.5-of-the-web.jpeg 2426w, https://filathlos.imagewize.com/app/uploads/2017/03/25.5-of-the-web-300x214.jpeg 300w, https://filathlos.imagewize.com/app/uploads/2017/03/25.5-of-the-web-768x547.jpeg 768w, https://filathlos.imagewize.com/app/uploads/2017/03/25.5-of-the-web-1024x729.jpeg 1024w" sizes="(max-width: 2426px) 100vw, 2426px"> <!-- Static Header -->
<div class="header-text carousel-caption hidden-xs">
<div class="ct-div-block">
<h2>
<span>Laptop</span>
</h2>
<br>
<h3>
<span><p>Slide number two</p>
</span>
</h3>
</div>
</div><!-- /header-text -->
</div><!-- end item -->
<div class="carousel-item">
<img width="3001" height="1998" src="https://filathlos.imagewize.com/app/uploads/2017/03/adjust-on-the-fly-e1489331922966.jpeg" class="img-responsive responsive--full wp-post-image" alt="" title="Feature image"> <!-- Static Header -->
<div class="header-text carousel-caption hidden-xs">
<div class="ct-div-block">
<h2>
<span>On the Fly</span>
</h2>
<br>
<h3>
<span><p>Slide number one.</p>
</span>
</h3>
</div>
</div><!-- /header-text -->
</div><!-- end item -->
</div> <!-- end carousel inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /carousel -->
</div>
我更喜欢滑块来处理不同尺寸的图像，这就是我使用最大高度和流体宽度的原因。
我是如何改进这一点并使所有幻灯片保持与幻灯片调整大小相同的高度和宽度的任何想法？
P.S。想要使用@包含标准查询并导入Bootstrap命名的查询，但不知何故有错误。