Есть ли какое-либо решение, чтобы показать серию изображений с различными размерами рядом друг с другом, и все они имеют одинаковую высоту без разрыва изображения?

Question

Моя проблема в том, что мне нужно показать серию изображений (максимум 5) рядом друг с другом, но изображения имеют разные размеры, например, квадратное изображение (150x150) выглядит больше рядом стот, который является прямоугольником.Мне нужно показать их все на одной высоте, не нарушая разрешение изображения.Важно сказать, что у меня есть 5 div с тегом img внутри, идея состоит в том, чтобы иметь 1 div и сделать его динамичным, чтобы редактор мог размещать свои собственные изображения.

Технологии, которые я использую: Bootstrap4

Вот как это выглядит: https://imgur.com/CqlTSll И вот как это должно быть: https://imgur.com/pP3fsb4

Я попытался поместить максимальную ширину 75px в div, которыйсодержит изображение, но есть части изображения, которые не отображаются.

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.scrolling-wrapper-flexbox {
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.scrolling-wrapper-flexbox::-webkit-scrollbar {
  display: none;
}

.imgbox {
  max-width: 150px;
  flex: 0 0 auto;
  margin-right: 3px;
}

.title {
  color: #142834;
  line-height: 21px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
}

.link {
  margin-top: 34px;
}

.img-styles {
  width: auto;
  max-width: 150px;
}

<div class="container mt-5">
  <div class="row d-flex justify-content-center">
    <div class="col-9 col-sm-10 col-md-11 col-xl-10">
      <div class="d-flex justify-content-center">
        <h4 class="title">Lorem ipsum dolor sit amet consectetur adipisicing elit</h4>
      </div>
      <div class="d-flex scrolling-wrapper-flexbox justify-content-between">
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="https://upload.wikimedia.org/wikipedia/commons/3/30/Zanella.png" alt="img1"></div>
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="http://www.uniminuto.edu/documents/991974/8397593/logo_issuu.png/081442f2-a9a8-4041-b0ef-9c47939df481?version=1.0&t=1511884354155&imagePreview=1" alt="img2"></div>
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Logo_Globosat.svg/500px-Logo_Globosat.svg.png" alt="img3"></div>
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Logo_MAM.png" alt="img4"></div>
        <div class="imgbox m-0 d-flex align-items-center"><img class="img-styles" src="https://www.pngeiti.org.pg/wp-content/uploads/2018/03/cropped-favicon-270x270.png" alt="img5"></div>
      </div>
      <div class="d-flex justify-content-center">
        <a href="#" class="link">Lorem ipsum dolor</a>
      </div>
    </div>
  </div>
</div>

Идея состоит в том, что все теги div и img имеют одинаковое поведение, потому что позже я хочу сделать его динамическим и оставить 1 div, чтобы редактор мог войтиего собственные изображения.

Answer 1

Используя bootstrap 4, оба эти решения должны работать:

.bootstrap-grid {
  display: inline-grid;
  grid-template-columns: repeat(5, 20%);
  align-items: baseline;
}
.bootstrap-grid img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  padding: 1rem;
}
.icons-flex > .container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}
.icons-flex > .container > div {
  flex-grow: 1;
  flex-direction: row;
  width: 20%; 
  text-align: center;
}
.icons-flex > .container > div > img {
  max-width: 100%;
  max-height: 120px;
  padding: 1rem;
}

<div class="container">
    <h2 class="text-center mt-4">Bootstrap Grid</h2>
    <div class="row mt-3 bootstrap-grid">
        <div class="grid"><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Zanella.png"></div>
        <div class="grid"><img src="http://www.uniminuto.edu/documents/991974/8397593/logo_issuu.png/081442f2-a9a8-4041-b0ef-9c47939df481?version=1.0&t=1511884354155&imagePreview=1"></div>
        <div class="grid"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Logo_Globosat.svg/500px-Logo_Globosat.svg.png"></div>
        <div class="grid"><img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Logo_MAM.png"></div>
        <div class="grid"><img src="https://www.pngeiti.org.pg/wp-content/uploads/2018/03/cropped-favicon-270x270.png"></div>
    </div>
    <h2 class="text-center mt-4">Flex</h2>
    <div class="row mt-3 flex icons-flex">
        <div class="container">
            <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Zanella.png"></div>
            <div><img src="http://www.uniminuto.edu/documents/991974/8397593/logo_issuu.png/081442f2-a9a8-4041-b0ef-9c47939df481?version=1.0&t=1511884354155&imagePreview=1"></div>
            <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Logo_Globosat.svg/500px-Logo_Globosat.svg.png"></div>
            <div><img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Logo_MAM.png"></div>
            <div><img src="https://www.pngeiti.org.pg/wp-content/uploads/2018/03/cropped-favicon-270x270.png"></div>
        </div>
    </div>
</div>

Надеюсь, это поможет.Здесь скрипка

Answer 2

Вы можете добавить свойство max-height в .img-styles (или в div вокруг тега img, но это не будет работать, если вы поместите все изображения в одно div)

Если вы хотите, чтобы изображения имели одинаковую высоту, вы должны сбросить max-width с .img-styles и .imgbox.В этом случае вам также потребуются изображения с высотой, превышающей указанную max-height.Этот результат может привести к некоторым очень широким изображениям.

В вашей модели того, как она должна выглядеть, высота некоторых элементов все еще меньше, поэтому я бы оставил свойство max-width, чтобы контролировать ширину некоторых элементов.В этом случае фактическая высота вашего изображения имеет меньшее значение, так как не все будет иметь одинаковую высоту в любом случае.