Javascript 引导转盘图像高度

我在bootstrap v4图像旋转木马中遇到一些图像问题。如果我缩小浏览器宽度，图像的高度保持不变，但是图像的宽度变小了，因此图像在高度上变得非常伸展

我已经在stackoverflow上查看了类似的线程，并尝试了我在评论中找到的所有内容，但仍然不起作用。所以我决定写一篇关于这个的新文章

这里有一个代码笔链接，但如果您不想访问代码笔，我也会将代码粘贴到这里：）

这是我的代码

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="images/image1.png" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h3>Random Title for image1</h3>
        <p>Random description1</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="images/image2.png" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h3>Random title for image2</h3>
        <p>Random description2</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="images/image3.png" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h3>Random title for image3</h3>
        <p>Random description3</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

图像1的随机标题
随机描述1

图像2的随机标题
随机描述2

图像3的随机标题
随机描述3

这是因为img父项，

.carousel item

是

display:flex

，而

img

是一个flex子项，因此它通过父项上的默认

align items:stretch

进行“拉伸”

有很多方法可以解决这个问题。最简单的方法可能是给

align items

一个值，而不是

stretch

或者，如果您不想应用自定义CSS并将更改保留在标记中，请将每个

img

包装在块元素中，如

div

或

figure

或任何适合您站点的元素

.carousel项目{
调整项目：灵活启动；
}

发型设计的廉价奖品
很好的发型奖品

3年发型师经验
了不起的结果

一些随机的标题文本
一些随机描述

您可以编写窗口大小调整事件，根据纵横比和窗口当前宽度将高度属性设置为图像标记。我在我的一个项目中这样做了。你的意思是在css中使用@media规则？或者使用一些javascript事件？您可以使用@media，但您必须编写太多的css。如果希望获得最佳结果，请转到window.onresize=函数（事件）{}；如果使用jQuery，那么$（window）.resize（function（）{//your code here}）；好的，谢谢。我会尝试，我有一个代码准备好了，但它是不可访问的，我现在。我会尽快发布我得到访问it@TimLevinsson不客气。我花了一分钟才弄明白！好问题，我认为这将对未来的人们有用，因为carousel的引导文档将

img

s作为

.carousel item

的子项。因此，我认为这将是相当经常出现的人。