如何强制 Bootstrap 行中的每张图片高度相同？

Question

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

我试过让父容器包含图像 (.carousel-content-container) 'display:flex;' 并给每个内部 div 一个 'flex: (aspect ratio of img);'，但那没有似乎有效——也许是因为它干扰了 Bootstrap 列？有谁知道一种不像 hack 的方法？

非常感谢这方面的任何帮助！请参阅下面的图片 link 来查看问题。

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%；。您必须决定是高度还是宽度更重要。否则图片会被拉长

也许 min-height and/or max-height 可以帮助调整大小？

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

如何强制 Bootstrap 行中的每张图片高度相同？

How Can I Force Each Image in a Bootstrap Row to be the Same Height?

html

css

bootstrap-4

height