html - 自动调整列表中图像的高度以始终保持在一行中

Question

我有一个列表(用作菜单)，其中包含图像。图片有不同的比例，有的是正方形，有的是长方形。

当视口(viewport)变小(移动)时，我无法将它们保持在同一条线上。我还使用 bootstrap 制作标签。

我现在在较小的视口(viewport)(移动设备)上拥有的内容:

这就是我想要的样子:

.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

您将在移动设备上面临的问题是，使用这种方法的图像将无法读取，而且用户无法识别它们。

但如果你还是要走这条路，请看下面的帖子

Responsive images inline-block in a div with Bootstrap

它描述了与您的问题类似的问题，只有 3 张图片，您必须根据自己的需要对其进行调整。