如何强制引导程序行中的每个图像具有相同的高度？

Question

我在同一行中有三张图片，我希望它们的所有高度都相同（保留宽高比）。

我已经尝试过使包含图像（.carousel-content-container）的父容器为'display：flex;'。并给每个内部div一个'flex：（img的纵横比）;'，但这似乎不起作用-也许是因为它干扰了Bootstrap列？有人知道不像骇客吗？

在这方面的任何帮助将不胜感激！请参阅下面的图像链接以查看问题。

See this image

HTML（轮播部分）：

<section class="portfolio-section">


        <div id="carouselExampleControls" class="carousel slide" data-interval="false" data-ride="false">

         <div class="carousel-inner">
            <div class="carousel-item active container-fluid">
              <div class="row">
                <div class="col-lg-5 col-md-5 carousel-content-container">
                  <img src="./imgs/art/the_beach.png" alt="beach img">
                </div>
                <div class="col-lg-4 col-md-4 carousel-content-container">
                  <img src="./imgs/art/joyce3.jpg" alt="joyce img">
                </div>
                <div class="col-lg-3 col-md-3 carousel-content-container">
                  <img src="./imgs/art/flower.jpeg" alt="flower img">
                </div>
              </div>
            </div>
            ... OTHER CAROUSEL ITEMS

         ... CAROUSEL PREVIOUS AND NEXT SLIDE BUTTONS

    </section>

CSS：

.portfolio-section .container-fluid {
  background-color: #342b38;
  padding: 7% 5%;
  color: white;
  text-align: center;
}

/* each image takes up 100% of parent div container (.carousel-content-container) */
.portfolio-section .carousel-content-container img {
  width: 100%;
  padding: 0;
  box-shadow: 5px 5px 5px 0px #1f1921;
}


.portfolio-section .carousel-inner{
  height: 20%;
}

.portfolio-section .row {
  border: 1px solid blue;
}

.portfolio-section .col-lg-5, .col-lg-4, .col-lg-3 {
  border: 1px solid red;
}

Answer 1

您将所有图像设置为宽度：100％;。您必须决定高度或宽度更重要。否则图片将被拉伸。

也许最小高度和/或最大高度将有助于调整大小？

对于引导容器的动态宽度，请使用col-md-auto