将 Flexbox 'ul' 容器内的所有 'li' 图像设置为相同的固定大小答案

【问题标题】：Get all 'li' images inside Flexbox 'ul' container to same, fixed size将 Flexbox 'ul' 容器内的所有 'li' 图像设置为相同的固定大小
【发布时间】：2021-10-19 02:12:00
【问题描述】：

我在每个li 标签中都有一张图片，每张图片下方都有一些文字。父 ul 和子 li 具有如下弹性框属性。

父 Ul：

{ display: flex; flex-wrap: row wrap; height: auto;}

李子：

ul.uploaded-pics li { flex: 0 1 auto; margin: 4px; align-self: center; vertical-align: middle; border-radius: 2px; }
ul.uploaded-pics label img { align-self: center; width: 100%; transition-duration: 0.2s; transform-origin: 50% 50%;}

我使用align-self: center; 让图像与父ul 的中心对齐。但是，图像大小并不一致，并且会根据每个相应标签中的文本量而变化。在标签文本流入第 2 或第 3 行的地方，上面的图像会拉伸以填充上面的空白区域。 align-self: flex-start; 和 align-self: flex-end; 也无济于事，每个 li 的图像大小不同。

无论下面label 中的文本如何，如何修复li 中的图像大小，以便图像彼此对齐并且文本标签也对齐？

找到下面的工作代码：

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
ul.uploaded-pics { margin: 0; padding: 1px; border: 1px solid #aaa; border-radius: 4px}
ul.uploaded-pics { list-style-type: none;}
ul.uploaded-pics img { border: 2px;}
ul.uploaded-pics input[type="checkbox"]{ display: none;}
ul.uploaded-pics label { padding: 4px; display: block; position: relative; cursor: pointer; text-align: center; color: blue;}
ul.uploaded-pics label img { align-self: center; width: 100%; transition-duration: 0.2s; transform-origin: 50% 50%;}
ul.uploaded-pics { display: flex; flex-wrap: row wrap; height: auto;}
ul.uploaded-pics li { flex: 0 1 auto; margin: 4px; align-self: center; vertical-align: middle; border-radius: 2px; }
.pull-right .btn { margin-left: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id=Destination>Select the brands:
    <ul class="uploaded-pics">
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand1" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />Brand1</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand2" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SybU8AAv8dm.jpg" />Brand2</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand3" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />XXXX XXXX XXXX XXXX XXXX Brand3</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand4" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SybU8AAv8dm.jpg" />XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX Brand4</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand5" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />Brand5</label>
        </li>
    </ul>
</div>

【问题讨论】：

标签： flexbox alignment vertical-alignment

【解决方案1】：

您需要将align-self 和flex-basis 添加到ul.uploaded-pics li，如下所示：

ul.uploaded-pics li {
  align-self: flex-start;
  flex-basis: 100%;
}

然后每列的大小相同，并且图像适合它。您可以同时删除 li 中的 flex 属性和 ul 中的 flex-grow 属性，因为它们是不必要的。

【讨论】：