Автоматическая настройка высоты изображений в списке, чтобы всегда оставаться в одной строке

Question

У меня есть список (функционирует как меню) с изображениями в нем.Изображения имеют разные пропорции, некоторые квадратные, другие прямоугольные.

У меня проблемы с удержанием их на одной линии, когда область просмотра становится меньше (мобильнее).Я также использую bootstrap для создания вкладок.

То, что у меня сейчас есть в меньших видовых экранах (мобильные):

И это то, чего я хочувыглядеть как:

.ProdText_Att_Img {
  max-height: 75px !important;
  padding: 10px;
}

.ProdText_barekraftLogoer {
  display: table;
  /* Allow the centering to work */
  margin: 0 auto;
}

.tab-content {
  padding-top: 25px;
}

.ProdText_bare_UL {
  white-space: nowrap !important;
  overflow: hidden !important;
}

.ProdText_bare_LI {
  display: inline !important;
}

@media only screen and (max-width: 600px) {
  .ProdText_Att_Img {
    max-height: 45px !important;
    padding: 0px;
  }
}

<div class="ProdText_barekraftLogoer">
  <ul class="ProdText_bare_UL nav nav-tabs" role="tablist">
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_1" aria-controls="tab_1" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Recycle001.svg/2000px-Recycle001.svg.png">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_2" aria-controls="tab_2" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://www.bluesign.com/inc/template/th_blue/images/logo.png">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_3" aria-controls="tab_3" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="http://www.fairtrade.no/fileadmin/system/img/fairtradenorge_logo_214x260.png">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_5" aria-controls="tab_5" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://cdn.shopify.com/s/files/1/2454/5197/files/biodegradable-bag-4_medium.png?v=1509802905">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_6" aria-controls="tab_6" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://www.uncpress.org/archive/farmfreshnorthcarolina.com/wp-content/uploads/2011/01/201101_31_Animal-Welfare-Approved.jpg">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_8" aria-controls="tab_8" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://www.fairwear.org/wp-content/themes/fairwear/dist/img/fair-wear-foundation-logo.png">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_4" aria-controls="tab_4" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://www.centexbel.be/sites/default/files/styles/full_width_preserve_ratio_desktop/public/media/image/std100logo.jpg?itok=htVK89Mr">
      </a>
    </li>
  </ul>
</div>

Answer 1

Я добавил sytle к вашему div, который имеет width: 100%.Это можно добавить также в CSS, который будет выглядеть так:

ProdText_barekraftLogoer {
    width: 100%;
}

Ниже приведен фрагмент кода с упомянутыми изменениями:

.ProdText_Att_Img {
  max-height: 75px !important;
  padding: 10px;
}

.ProdText_barekraftLogoer {
  display: table;
  /* Allow the centering to work */
  margin: 0 auto;
}

.tab-content {
  padding-top: 25px;
}

.ProdText_bare_UL {
  white-space: nowrap !important;
  overflow: hidden !important;
}

.ProdText_bare_LI {
  display: inline !important;
}

@media only screen and (max-width: 600px) {
  .ProdText_Att_Img {
    max-height: 45px !important;
    padding: 0px;
  }
}

<div class="ProdText_barekraftLogoer" style="width: 100%;">


  <ul class="ProdText_bare_UL nav nav-tabs" role="tablist">
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_1" aria-controls="tab_1" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Recycle001.svg/2000px-Recycle001.svg.png">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_2" aria-controls="tab_2" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://www.bluesign.com/inc/template/th_blue/images/logo.png">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_3" aria-controls="tab_3" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="http://www.fairtrade.no/fileadmin/system/img/fairtradenorge_logo_214x260.png">
      </a>
    </li>

    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_5" aria-controls="tab_5" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://cdn.shopify.com/s/files/1/2454/5197/files/biodegradable-bag-4_medium.png?v=1509802905">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_6" aria-controls="tab_6" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://www.uncpress.org/archive/farmfreshnorthcarolina.com/wp-content/uploads/2011/01/201101_31_Animal-Welfare-Approved.jpg">
      </a>
    </li>

    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_8" aria-controls="tab_8" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://www.fairwear.org/wp-content/themes/fairwear/dist/img/fair-wear-foundation-logo.png">
      </a>
    </li>
    <li class="ProdText_bare_LI" role="presentation">
      <a href="#tab_4" aria-controls="tab_4" role="tab" data-toggle="tab">
        <img class="ProdText_Att_Img" src="https://www.centexbel.be/sites/default/files/styles/full_width_preserve_ratio_desktop/public/media/image/std100logo.jpg?itok=htVK89Mr">
      </a>
    </li>
  </ul>
</div>

Answer 2

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

Но если вы все еще собираетесь идти по этому пути, пожалуйста, посмотрите наследующий пост

Отзывчивый встроенный блок изображений в div с Bootstrap

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