响应式旋转木马的高度

Question

我一直在愚弄这个旋转木马好几天。我试图让它在高度响应，但它一直搞砸了，伸展得很长。我读了很多东西，尝试了很多不同的技巧。任何人都可以发现我做错了什么，所以希望我可以从这个可爱的旋转木马继续前进或开始实际将图像放入其中。媒体查询是我的最后一个实验，基本上我只是希望它在移动设备上按比例调整大小，我不太确定它的屏幕尺寸。我猜我的图像是否会被设置为1024 x 700，我应该使用700高度为中等大小？

<div class="container">     
<div id="portfolio">
<div class="row">
<div class="col-12">
<h1 class="display-3">Portfolio</h1>
<p class="lead">Here are some examples of my latest works.</p>

<div id="carouselPortfolio" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" 
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" role="listbox">

<!-- Images -->
<div class="carousel-item active">
<img class="d-block" src="http://www.placehold.it/1024x700" alt="First 
slide">
<div class="carousel-caption">
<h3>Business Cards</h3>
<p>Here are some business cards I have made.</p></div></div>

<div class="carousel-item">
<img class="d-block" src="http://www.placehold.it/1024x700" alt="Second 
slide">
<div class="carousel-caption">
<h3>First Website in 1997</h3>
<p>I ran one of the top Mariah Carey fansites for six years (1998-2003) and 
got to meet Mariah Carey multiple times, got 20+ autogaphs, got personal 
phone messages from Mariah to put on my website and I enjoyed updating it on 
a daily basis.</p></div></div>

<div class="carousel-item">
<img class="d-block" src="http://www.placehold.it/1024x700" alt="Third 
slide">
<div class="carousel-caption">
<h3>Billboard Designs</h3>
<p>I worked with SSMarketing Solutions and designed various marketing 
materials for her clients. I got the chance to design and illustrate two of 
their billboards that appeared on main highways in New Jersey.</p></div>
</div>

</div><!--Carousel Inner-->
</div><!--Carousel Example Slides Only--> 

<!-- Controls -->
<a class="carousel-control-prev" href="#carouselPortfolio" role="button" 
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span></a>

<a class="carousel-control-next" href="#carouselPortfolio" role="button" 
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span></a>

</div><!--column-->
</div> <!--row-->
</div><!-- Scrollspy -->

CSS： / * Carousel * /

#carouselPortfolio img {
min-height: 300px;
min-width: 100%;
}

#carouselPortfolio > .carousel-indicators > li {
border-radius: 0px;
min-width: 25px;
min-height: 10px;
background-color: #9d9d9d;
border: 1px solid black;
margin-right: 10px;
margin-left: 10px;
}

#carouselPortfolio > .carousel-indicators > .active {
background-color: #5b9ed5;
}

#carouselPortfolio .carousel-caption {
color: black;
text-align: center;
top: auto;
}

#carouselPortfolio .carousel-inner .carousel-item {
max-width: 1024px;
max-height: 740px;
margin: auto;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { 
.carousel-inner {
 max-height: 200px; 
}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { 
.carousel-inner {
 max-height: 700px; 
}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min){ 
.carousel-inner {
 max-height: 700px; 
}
}